How to overlap one block with another when using flex?

Question

css

I use a flex grid in my project, modal windows have been added to the project, which are called when the login / registration buttons are called in the header, the login and registration components themselves are in the content, the task is to make the overlay of the modal window overlap, which does not affect the header and footer .

<template>
  <div id="feed">
    <div class="container">
      <app-header></app-header>
      <div class="main_content"> - контент, на который должно действовать затемнение оверлея модального окна
        <app-login></app-login> - модальное окно входа
        <app-registration></app-registration> -  модальное окно регистрации
        <app-post class="col-3" v-for="post in posts" :post="post"></app-post>
      </div>
    </div>
    <app-footer></app-footer>
  </div>
</template>

css for modal div

.v--modal-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgba(72, 33, 107, 0.15);
    box-sizing: border-box;
    left: 0;
    z-index: 999;
    opacity: 1;
  }

Answer 1

something I do not understand the problem and where does flexbox
https://codepen.io/anon/pen/ELqRjY