css - 使用 z-index 交错非同级

Question

我试图让侧边栏菜单与 content 重叠div，其中活动菜单项出现在div和非活动项将出现在下面。ula和之间的交集div很小，但交错效果会产生深度错觉。

我知道这z-index仅适用于兄弟元素。所以以下不起作用：

#menu {z-index:0}
#menu li.active {z-index:2}
#content {z-index:1}

<ul id="menu">
  <li class="active">Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<div id="content">Side content</div>

有没有一种好方法可以做到这一点，而不必使每个菜单项 adiv在同一级别上#content？

Answer 1

您希望一些li出现在 a 的前面div，而另一些出现在它的后面。

实现这一点的唯一方法是确保所有li和div属于同一个堆叠上下文。这意味着ul不能创建任何堆叠上下文，所以不要对其设置任何z-index内容。请参阅哪些 CSS 属性创建了堆叠上下文？究竟应该避免什么。

然后就很容易了：只需根据需要将z-index属性设置为 theli和 the div。但是，请记住，z-index这只适用于定位元素，例如position: relative.

#menu > li.active {
  position: relative;
  z-index: 2;
}
#content {
  position: relative;
  z-index: 1;
}

body {
  margin: 8px;
  position: relative;
}
#menu {
  margin: 0;
  padding: 5px 0;
  list-style: none;
}
#menu > li {
  padding-left: 15px;
  border: 1px solid;
  background: yellow;
  margin: 4px 0;
}
#menu > li.active {
  position: relative;
  z-index: 2;
}
#content {
  position: absolute;
  background: blue;
  top: 0;
  left: 5px;
  width: 5px;
  height: 100%;
  z-index: 1;
}

<ul id="menu">
  <li class="active">Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<div id="content"></div>

Answer 2

我建议不要使用 z-index 来执行此操作，而是尝试根据 li 项是否处于活动状态来设置它们的宽度。如果您使侧边栏导航与内容 div 齐平，那么您可以使 .active li 稍微宽一些，使其与内容 div 重叠。这样它看起来就像菜单的非活动部分在内容 div 下。如果我没有正确理解你的想法，也许你可以给我举个例子。祝你好运，听起来像一个漂亮的效果。

Answer 3

我可以建议使用一些背景技巧，而不是弄乱 z-indices 和毛茸茸的 CSS hacks？您可以做的一件事是给菜单一个重复的背景，以便它的一部分看起来是内容 div 的一部分。然后活动项目可以具有似乎延伸到内容中的背景。这要简单得多，并且避免了很多麻烦。

Answer 4

给 li 一个 z-index 而不是 #menu：

#menu li {z-index:0}
#menu li.active {z-index:2}
#content {z-index:1}

并且不要忘记将它们相对定位以使 z-index 生效。