display:flex下z-index层级异常问题解决方案咨询

问题背景 #

需要实现两个核心效果：

• 特定场景下页面显示遮罩层（backdrop）
• 遮罩激活时，指定的.child元素显示在遮罩上方，header元素显示在遮罩下方

给父容器.fullscreen添加display:flex后出现层级异常：

• 原本应在遮罩下方的header反而显示在遮罩上方
• 指定的.child无法正常显示在遮罩之上

移除display:flex或修改header的z-index会破坏现有功能，需在保留原有设置的前提下修复问题。

最小复现代码 #

<!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>

问题原因 #

在Flex布局规则中，所有flex子元素（即使是position: static）只要设置了z-index属性，就会自动创建独立的堆叠上下文。而.backdrop是fixed定位，本身也会生成堆叠上下文。此时：

1. header的堆叠上下文与.backdrop的堆叠上下文处于同一层级，由于header在DOM结构中先出现，导致其内容覆盖在遮罩之上
2. .child是header的子元素，它的z-index仅在header的堆叠上下文内生效，无法突破层级显示在遮罩之上

解决方案 #

通过调整父容器定位方式和遮罩的定位属性，让所有元素的层级关系在同一堆叠上下文中生效，同时保留display:flex和header的z-index设置：

<!DOCTYPE html>
<html>

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

  <style type="text/css">
    .backdrop {
      position: absolute; /* 将fixed改为absolute，相对于父容器定位 */
      right: 0;
      bottom: 0;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1; /* 调整z-index，低于.child的层级 */
    }

    .child {
      background: #fff;
      z-index: 2; /* 确保高于遮罩层级 */
      position: absolute;
    }

    header {
      z-index: 1; /* 保留原有z-index设置 */
      position: static;
    }

    .fullscreen {
      display: flex;
      position: relative; /* 添加relative，让遮罩相对于该容器定位 */
      min-height: 100vh; /* 确保容器占满视口，模拟fixed遮罩的全屏效果 */
    }
  </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>

方案说明 #

1. 给.fullscreen添加position: relative，让遮罩层相对于该容器定位，确保全屏覆盖效果
2. 将.backdrop的position从fixed改为absolute，使其层级受父容器控制
3. 调整.backdrop和.child的z-index值，确保.child在遮罩之上，header在遮罩下方
4. 保留header的原有z-index和display:flex设置，不影响其他功能

内容的提问来源于stack exchange，提问作者atlefren