用z-index交换非兄弟姐妹

Question

我试图让侧边栏菜单重叠内容div，其中活动菜单项出现在div上，非活动项目将显示在下面。 ul和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>

有没有一个很好的方法来做到这一点，而不必使每个菜单项div与#content处于同一水平？

Answer 1

我可以建议使用一些背景技巧，而不是搞乱z-indices和毛茸茸的CSS黑客攻击？你可以做的一件事是给菜单一个重复的背景，以便它的一部分显示为内容div的一部分。然后，活动项目可以具有似乎延伸到内容中的背景。这更简单，避免了很多麻烦。

Answer 2

我建议不要使用z-index来做这件事，尝试根据它们是否有效来设置li项的宽度。如果您使侧栏导航与内容div齐平，则可以使.active li稍微宽一些，以便它与内容div重叠。这样看起来菜单的非活动部分就在内容div下面。如果我不能正确理解你的想法，也许你可以给我一个例子。祝你好运，听起来像一个漂亮的效果。

Answer 3

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

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

并且不要忘记将它们相对于z-index生效。

Answer 4

你想要一些li出现在div的前面，而其他的则出现在它的后面。

实现这一目标的唯一方法是确保所有li和div都属于同一个stacking context。这意味着ul不能创建任何堆叠上下文，所以不要设置任何z-index。请参阅Which CSS properties create a stacking context?，了解应该避免的内容。

然后它将很容易：只需将z-index属性设置为li和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>