Как при использовании flex перекрыть один блок другим?

Question

[Еления]

Своем проекте использую флекс сетку, в проект добавились модальные окна, которые вызываются при вызове на кнопки входа/регистрации в хэдере, сами компоненты входа и регистрации находятся в контенте, задача в том, чтобы сделать перекрытие оверлея модального окна, которое не задевает хэдер и футер.

<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 для дива модального окна

.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

[Froggyweb]

что-то я не понимаю проблемы и причем здесь flexbox
https://codepen.io/anon/pen/ELqRjY