css - 如何使用 z-index 对盒子阴影进行分层？

Question

codepen

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

#c {
  background: red;
  z-index: 1;
  position: relative;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 1;
  position: relative;
}

li {
  display: inline-block;
  padding: 2px 5px;
}

.current {
  background-color: orange;
  z-index: 3;
  position: relative;
}

#d {
  box-shadow: 0 0 10px black;
  z-index: 2;
}

<div id="a">
  <div id="b">bbb</div>
  <div id="c">
    <ul>
      <li>a</li>
      <li class="current">b</li>
      <li>c</li>
      <li>d</li>
    </ul>
  </div>
</div>
<div id="d">dddd
</div>

看看码笔。我或多或少地得到了我想要的图层，除了我希望“b”选项卡位于由上面的橙色 div 引起的框阴影上方。

具体来说，橙色的 #b div 应该在红色的 #c div 上投下阴影，.current 标签应该齐平使用橙色 #b div(上面没有阴影)，#d 应该不在 #c< 上转换阴影 完全没有。

问题是 .current 上的 z-index 似乎不起作用。

Answer 1

如果您使用的是 z-index，请确保该元素具有已定义的位置属性，否则它将不起作用。无论您在 css 中的什么地方使用 z-index，请定义该元素的位置。 (绝对、相对、继承……)