CSS如何将玻璃效果overlay层移动至页面元素/容器下方？

你设置z-index: -1没效果，本质是踩了z-index的两个基础规则坑：

• z-index仅对position值不为static（元素默认定位值）的元素生效，你代码里的.white-overlay和.block都没设置定位属性，写的z-index代码完全不会被浏览器解析生效。
• 现有DOM结构里.block是.white-overlay的子元素，子元素默认渲染在父元素内容层之上，你给父元素设置负z-index，会直接让整个父元素（包含里面的所有子内容）一起掉到body背景层后面，根本实现不了“蒙层在内容下方、在body背景上方”的效果。

推荐直接调整结构+补全定位属性，兼容性和稳定性最好：

1. 把蒙层元素和内容元素改成同级节点，不要嵌套
2. 给两个元素都加上定位属性，再设置对应层级
   调整后完整可运行代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    body { 
      background: #00639e;
      margin: 0;
      min-height: 100vh;
    }

    .white-overlay {
      /* 加定位让z-index生效，fixed固定铺满视口 */
      position: fixed;
      inset: 0;
      background: #f6f9fc;
      opacity: 0.3;
      z-index: 1;
    }

    .block {
      /* 内容块加定位，层级设置比蒙层高即可 */
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      z-index: 2;
    }

    h1 {
      color: #fff;
    }
  </style>
</head>
<body>
  <!-- 蒙层和内容同级，不嵌套 -->
  <div class="white-overlay"></div>
  <div class="block">
    <h1>Hello World</h1>
  </div>
</body>
</html>

如果你不想改动现有DOM嵌套结构，可以用伪元素承载蒙层效果，不需要改HTML结构：

.white-overlay {
  /* 给父元素加相对定位，作为伪元素的定位参照 */
  position: relative;
  width: 100%;
  min-height: 100vh;
}
/* 用伪元素单独渲染蒙层 */
.white-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #f6f9fc;
  opacity: 0.3;
  z-index: -1;
}

/* .block和h1的原有样式不需要修改，不用额外加z-index */
.block {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

h1 {
  color: #fff;
}

这个方案的原理是蒙层作为父元素的伪元素，设置负z-index后会掉到父元素内容层的下方，但因为父元素没有设置z-index创建独立层叠上下文，伪元素不会掉到body背景后面，刚好卡在背景和内容中间，实现你要的淡色玻璃蒙层效果。

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