CSS属性异常排查：元素阴影层级不符合预期如何修复？

看起来你遇到了CSS堆叠上下文导致的层级混乱问题，这在使用定位、z-index和伪元素时很常见，我来帮你拆解修复：

问题根源 #

你的核心问题出在堆叠上下文的创建规则上：你给<div>元素同时设置了position: absolute、z-index: 2和transform: translate()，这几个属性组合会触发创建独立的堆叠上下文。在这个上下文里，所有子元素（包括你用来做投影的::before伪元素）的z-index只能在这个内部上下文生效——哪怕你给伪元素设了z-index: -5，它也只会在<div>的下方，但仍然和<div>处于同一堆叠层级，无法真正“下沉”到<section>的背景层后面，导致你看到的阴影层级异常。

修复方案 #

我调整了你的代码，移除了不必要的堆叠上下文，并优化了定位逻辑：

修复后的CSS代码 #

* { margin: 0; padding: 0; }
body, html { height: 100%; }
section { 
  position: relative; 
  top: 50%; 
  height: 50%; 
  background: linear-gradient(to bottom, #e3e5e7, #fef9fa); 
}
div { 
  position: absolute; 
  top: 0; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  width: 180px; 
  height: 180px; 
  border-radius: 50%; 
  background: white; 
  box-shadow: inset 25px -25px 35px rgba(100, 100, 100, 0.5); 
  /* 移除z-index:2，避免强制创建独立堆叠上下文 */
}
div::before { 
  content: ''; 
  position: absolute; 
  bottom: 0; 
  width: 180px; 
  height: 45px; 
  background: gray; 
  border-radius: 50%; 
  left: 50%; /* 调整left值，配合translate更直观 */
  transform: translate(-50%, 22px); 
  filter: blur(5px); 
  z-index: -1; /* 用-1足够让它沉到div下方 */
}

对应的HTML（仅修正格式，无逻辑改动） #

<section> 
  <div class="ball"></div> 
</section>

关键调整说明 #

1. 移除<div>的z-index:2：这是解决问题的核心，没有这个属性，<div>就不会创建独立堆叠上下文，伪元素的z-index就能相对于父容器<section>生效，自然沉到<div>下方。
2. 优化伪元素定位：把left: -100%改成left: 50%，配合transform: translate(-50%,22px)，让定位逻辑更直观，避免不必要的偏移计算。
3. 简化伪元素z-index：用z-index: -1代替-5，效果完全一致，更简洁。

拓展场景 #

如果之后你需要让<div>保持在其他元素上方，可以给<section>设置z-index:0，再给<div>设置z-index:1——这样伪元素的z-index:-1会落在<section>的堆叠层级下方，依然能正常显示投影效果。

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