独立容器堆叠上下文问题：卡片box-shadow无法显示于下方行之上如何解决？

我正在构建一个网格布局，包含多行单元格和覆盖特定单元格的项目。原本在单个父容器下，浅蓝色单元格和作为子元素的黄色卡片（position: absolute定位）共享同一堆叠上下文，能正常显示阴影覆盖效果。

但当我把每行单元格（对应一张卡片）放入独立的父行容器后，出现了问题：黄色卡片的box-shadow无法显示在下方的行之上。

代码示例 #

CSS

.container {
  width: 100px;
  height: 50px;
  position: relative;
}

.one {
  position: absolute;
  top: 0;
  border: 1px solid black;
  height: 100%;
  width: 70px;
  box-shadow: 5px 5px blue;
  background-color: lightyellow;
  
}
.two {
  background-color: coral;
  height: 100%;
  position: absolute;
  top: 0px;
  border: 1px solid grey;
}
.three {
  border: 1px solid green;
  width: 100%;
  height: 100%;
  background-color: lightblue;
}

HTML

<div class='container'>
  <div class='one'>
    One
  </div>
  <div class='three'>

  </div>
</div>

<div class='container'>
  <div class='two'>
    Two
  </div>
  <div class='three'>
   
  </div>
</div>

解决方案 #

可以实现，核心是调整堆叠上下文的层级：

• 给每个.container设置非auto的z-index以创建独立堆叠上下文，同时给需要显示阴影的卡片设置更高的z-index，让其阴影能突破父容器的堆叠范围。

修改后的CSS示例：

.container {
  width: 100px;
  height: 50px;
  position: relative;
  z-index: 1; /* 明确创建堆叠上下文 */
  margin-bottom: 10px; /* 增加间距，方便观察阴影效果 */
}

.one {
  position: absolute;
  top: 0;
  border: 1px solid black;
  height: 100%;
  width: 70px;
  box-shadow: 5px 5px blue;
  background-color: lightyellow;
  z-index: 2; /* 让卡片层级高于父容器，阴影可覆盖下方行 */
}

.two {
  background-color: coral;
  height: 100%;
  position: absolute;
  top: 0px;
  border: 1px solid grey;
}
.three {
  border: 1px solid green;
  width: 100%;
  height: 100%;
  background-color: lightblue;
}

原理说明 #

当.container设置position: relative时会创建独立的堆叠上下文，默认情况下内部元素的堆叠仅局限于该上下文内。通过给卡片设置更高的z-index，同时确保父容器的z-index为非auto，就能让卡片的阴影穿透父容器的堆叠边界，显示在下方的行容器之上。

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