Question 220122 in Html Question posted in
Some basic documentation can be found here.

Html – Overlay in flex doesn't cover all later flex boxes

Consider the following html and css:

<div class="page">
  <div class="region"> 
    <div class="zone">
      Left
    </div>
    <div class="zone">
      Center
    </div>
    <div class="zone">
      Right
    </div>
  </div>
  <div class="region">
    <div class="zone">
      Left
    </div>
    <div class="zone">
      Right
      <div id="overlay"></div>      <!--- Overlay -->
    </div>
  </div>
  <div class="region">
    <div class="zone">
      Left
    </div>
    <div class="zone">
      Center
    </div>
    <div class="zone">
      Right
    </div>
  </div>
</div>

.page {
  background-color: #333;
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 10px;
}

.region {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding: 10px 0px;
  position: relative;
  z-index: 0;
  gap: 20px;

  &:first-of-type {
    padding-top: 0px;
    height: 130px;
  }

  &:nth-of-type(2) {
    height: calc(100vh - 245px);
  }

  &:last-of-type {
    padding-bottom: 0px;

  }
}

.zone {
  display: flex;
  flex-direction: column;
  flex: 1;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 10px;
  padding: 0px 10px;
  background-color: #0000ff33;

  &:first-of-type {
    padding-left: 20px;
  }

  &:last-of-type {
    padding-right: 20px;
  }
}

#overlay {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1000;
   background: #ffffff66;
}

Here’s a working example: https://codepen.io/a11smiles/pen/rNQoaPv

The problem is that the overlay covers the top and middle flex-boxes and their content. However, while the overlay is the full width and height of the screen, the footer flex-box and its content is always on top (the overlay is behind the footer). Nothing that I’ve done has changed that. As you can see, I’ve tried setting the footer‘s z-index explicitly to 0, but that doesn’t work either.

Any thoughts?

Thanks!

Tags:

3

Answers


  1. 0 
    .page {
    background-color: #333;
    height: 100vh;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
    position: relative; /* Add this line to create a new stacking context */
    z-index: 1; /* Add this line to set the z-index of the new stacking context */
}

    /* Rest of your CSS remains the same */

    The problem with the overlay not covering the footer flex-box and its content is due to the stacking context created by the z-index property and the position property used in the CSS.

    You can do this by adding position: relative; z-index: 1; to the .page class.This will create a new stacking context for the entire page, and an overlay with z-index: 1000 will appear on top of all elements in this new stacking context, including the footer flex-box.

    Login or Signup to reply.
  2. 0

    Update your ‘.region’ style to this (also ‘&:last-of-type’)

    .region {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding: 10px 0px;
  position: relative;
  z-index: 1;
  gap: 20px;

  &:first-of-type {
    padding-top: 0px;
    height: 130px;
  }

  &:nth-of-type(2) {
    height: calc(100vh - 245px);
  }

  &:last-of-type {
    padding-bottom: 0px;
    z-index: 0;
  }
}
    Login or Signup to reply.
  3. 0

    To make the Overlay overlay the entire viewport either

    • Don’t use z-index: 0; for other elements
    • Place the overlay outside of your elements, i.e: in body

    Here’s the first solution:

    * {margin: 0; box-sizing: border-box;}

.page {
  background-color: #333;
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 10px;
}

.region {
  display: flex;
  flex-wrap: nowrap;
  padding: 10px 0px;
  position: relative;
  /* z-index: 0;         /* REMOVE! */
  gap: 20px;

  &:first-of-type {
    padding-top: 0px;
    height: 130px;
  }

  &:nth-of-type(2) {
    height: calc(100vh - 245px);
  }

  &:last-of-type {
    padding-bottom: 0px;

  }
}

.zone {
  display: flex;
  flex-direction: column;
  flex: 1;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 10px;
  padding: 0px 10px;
  background-color: #0000ff33;

  &:first-of-type {
    padding-left: 20px;
  }

  &:last-of-type {
    padding-right: 20px;
  }
}

#overlay {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1000;
   background: #ffffff66;
}
    <div class="page">
  <div class="region">
    <div class="zone">
      Left
    </div>
    <div class="zone">
      Center
    </div>
    <div class="zone">
      Right
    </div>
  </div>
  <div class="region">
    <div class="zone">
      Left
    </div>
    <div class="zone">
      Right
      <div id="overlay"></div>
      <!--- Overlay -->
    </div>
  </div>
  <div class="region">
    <div class="zone">
      Left
    </div>
    <div class="zone">
      Center
    </div>
    <div class="zone">
      Right
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search