How to make the modal darken not touch the header and footer?

Question

css

There are two modal windows in the project that are called when you click on the login or registration buttons located in the header. The problem is that the dimming of the modal should not affect the header and footer. This is the first time I've encountered this
The code of the modal login window:

<template>
  <transition name="fade">
    <modal name="login"  width="430"  height="auto">
      <div class="container_login" :class="{login: true, overlay: isOverlay}">
        <div class="login_title">
          <p class="title">Добро пожаловать!</p>
        </div>
        <div class="form_login">
          <input type="email" placeholder="Ваш e-mail">
          <input type="password" placeholder="Пароль">
          <button class="entry_btn mdl-button mdl-js-button mdl-button--raised">Войти</button>
        </div>
        <div class="href_pass">
          <a href="#">Забыли пароль?</a>
        </div>
      </div>
    </modal>
  </transition>
</template>

Regarding template settings:

<script>
    export default {
        name: 'app-login',
        props: {
          isOverlay: {
            type: Boolean,
            default: true
          }
        },
        data() {
            return {
            }
        },
      methods: {
        show () {
          this.$modal.show('app-login');
        }
      }
    }
</script>

Everything about styles, I use sass in my project, I converted it to css for the question:

<style>

  .fade-enter-active, .fade-leave-active {
   transition: opacity 0.2s;
  }

  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
  .overlay {
    z-index: 99999;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: #fff;
  }
  .container_login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 35px;
    height: 350px;
    width: 300px;
    margin: auto;
    background-color: #fff;
    border-radius: 5px;
   }
   .container_login.login_title {
     display: flex;
     flex-direction: row;
   }
   .container_login.login_title.title {
      font-size: 20px;
      font-weight: 600;
      color: rgb(70, 66, 66);
   }
   .container_login.form_login {
      display: flex;
      flex-direction: column;
   }
   .container_login.form_login input {
      padding: 20px;
      margin: 17px 0;
      font-size: 15px;
      background-color: rgb(239, 239, 239);
    }
    .container_login.form_login.entry_btn {
      height: 50px;
      font-size: 15px;
      text-transform: capitalize;
      border-radius: 5px;
      box-shadow: none;
      color: #fff;
      background-color: rgb(153, 198, 31);
   }
   .container_login.href_pass {
     display: flex;
     margin: 20px 0;
   }
</style>

Answer 1

You can try adjusting the z-index of the header, footer, and main site content block so that the z-index of the .overlay block is higher than the main site content block, but less than the z-index of the header and footer. However, there is a risk that the window itself will crawl behind the page elements (also play around with this property on the window).
Actually, it will be necessary to work out the return of the z-index property to its previous values ​​​​after closing the window.

Answer 2

A couple of options:
1. Draw the footer/header above the shading via z-index
2. Set the shading height as: height: calc(100vh - XYpx) - where XY is the sum of the header and footer heights.