Css: z-Index and display: flex

Question

I have a page where I want to achieve the following:

I have a normal page, that I in some cases want to apply a backdrop to
When the backdrop is active, I want a specific div to ble visible on top of the backdrop

This works great, untill I use this on my page where I'm using display: flex

I've produced a minimal example that shows the problem

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <style type="text/css">
    .backdrop {
      position: fixed;
      right: 0;
      bottom: 0;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 2;
    }

    .child {
      background: #fff;
      z-index: 3;
      position: absolute;
    }

    header {
      z-index: 1;
      position: static;
    }

    .fullscreen {
      /*display: flex;*/
    }
  </style>

</head>

<body>
  <div id="root">
    <div class="fullscreen">
      <header>
        should be below backdrop
        <div class="child">should be above backdrop</div>
      </header>
      <div class="backdrop"></div>
    </div>
  </div>
</body>

</html>

this works as expected:

However, when I add display: flex to the fullscreen-div it does not work:

I realize that I could remove the display: flex, but this breaks other functionality on my site. Another option is to remove the z-index on the header-element, but this causes other issues.

So I'm kinda stuck trying to figure out how to solve this. Any ideas?

JsFiddle with the attached example

Does the element with the `child` class only become visible when the backdrop is active or is it always visible? Is it like a modal? — Usaid, May 30 '23 at 12:13
It is always visible. This is as a top-menu, where I want to hightlight a particular button — atlefren, May 30 '23 at 12:59

imhvost · Answer 1 · 2023-05-30T13:06:28.940

One of the options is to set a lower z-index in .backdrop:

.backdrop {
  position: fixed;
  right: 0;
  bottom: 0;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1; /*  */
}

.child {
  background: #fff;
}

.fullscreen {
  display: flex;
}

<div id="root">
  <div class="fullscreen">
    <header>
      should be below backdrop
      <div class="child">should be above backdrop</div>
    </header>
    <div class="backdrop"></div>
  </div>
</div>

P.S. If you are wondering why this happens to you: Stacking context

Element that is a child of a flex container, with z-index value other than auto.

Your fixed code:

.backdrop {
  position: fixed;
  right: 0;
  bottom: 0;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.child {
  background: #fff;
  z-index: 3;
  position: absolute;
}

header {
  z-index: auto; /*  */
  position: static;
}

.fullscreen {
  display: flex;
}

<div id="root">
  <div class="fullscreen">
    <header>
      should be below backdrop
      <div class="child">should be above backdrop</div>
    </header>
    <div class="backdrop"></div>
  </div>
</div>

Right, thanks! This works for the provided example! My bad for messing up a couple of things: 1. The header has position: fixed, not static 2. The "should be below backdrop" is also in a separate container — atlefren, May 30 '23 at 13:00
I don't really understand what you want. Perhaps such a result: [codepen](https://codepen.io/imhvost/pen/KKGLGEY)? — imhvost, May 30 '23 at 14:06

Css: z-Index and display: flex

1 Answers1