css - 相同的 z-index 不会产生想要的盒子阴影效果

Question

盒子阴影密码笔

#b {
  background: orange;
  box-shadow: 0 0 10px black;
  z-index: 2;
  position: relative;
}

#c {
  background: red;
  box-shadow: 0 0 10px black;
  z-index: 2;
  position: relative;
}

我试图让具有相同 z 级别的元素在它们的盒子阴影中不相互重叠。在链接的示例中，所有内容的 z 级别为 2，但中间元素的框阴影与上部元素重叠。考虑到这两个元素在同一平面上，我会认为这不会发生。有什么建议么？

Answer 1

正如已经指出的，如果 z-index 不同，绘制元素的顺序很重要。

对我来说，解决方案是将所有阴影投射元素放入一个容器中，该容器会投射所包含元素的阴影。

.shadow {
  box-shadow: 0 0 10px black;
}

<div class="shadow">
  <p>shadow-casting element 1</p>
  <p>shadow-casting element 2</p>
</div>
<p>normal element</p>