Question

HTML

<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>

CSS

#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;
}

看看代码笔。我的层数或多或少都是我想要的，除了我希望“b”标签位于由上面的橙色div引起的盒子阴影之上。

详细说明，橙色#b div应该在红色#c div上投射阴影，.current标签应该与橙色#b div齐平（没有阴影就可以了，#d

问题在于#c z-index似乎不起作用。

Answer 1

如果您正在使用z-index，请确保该元素具有已定义的位置属性，否则它将无效。无论您在css中使用z-index，都要定义该元素的位置。（绝对，相对，继承...）

Answer 2

演示： http://codepen.io/anon/pen/vLgKC

有关z-index以及堆叠背景和优先级的更多信息，请参阅我的回答here。

上述内容与inset

的box-shadow相结合

<强>插入

如果未指定（默认），则假定阴影为阴影（就好像该框被提升到内容之上）。   inset关键字的存在将阴影更改为框架内的阴影（就像在框内按下内容一样）。   在边框内绘制插入阴影（甚至是透明的阴影）   背景，但低于内容。

和negative spread

<强>传播半径

这是第四个值。正值会导致阴影扩大并变大，负值会导致阴影   阴影缩小。如果未指定，则为0（阴影将与元素的大小相同）。

（here}

会给你你正在寻找的效果。

因此，您需要更改阴影应用于元素的位置。

所以最终的CSS：

#b {
  background: orange;
  z-index: 2;
  position: relative;
}

#c {
  background: red;
  -webkit-box-shadow: inset 0 10px 10px -10px black;
  -moz-box-shadow: inset 0 10px 10px -10px black;
  box-shadow: inset 0 10px 10px -10px black;
  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;
}

Answer 3

尝试在列表元素上使用插入框阴影，当所选元素具有类.current时，请从中删除插入阴影。

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

HTML

CSS

3 个答案: