css - 使用 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>

有没有一种好方法可以做到这一点，而不必将每个菜单项都设为与 #content 处于同一级别的 div？

Answer 1

您希望一些 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>