将非同级与 z 索引交错

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 属于同一个 堆叠上下文。 这意味着 ul 不得创建任何堆叠上下文，因此不要为其设置任何 z-index。 请参阅哪些 CSS 属性创建堆叠上下文？了解到底应该避免什么。

然后就很简单了：只需根据需要将 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>

Answer 2

我可以建议使用一些背景技巧，而不是搞乱 z 索引和毛茸茸的 CSS 黑客吗？ 您可以做的一件事是为菜单提供重复的背景，以便其一部分看起来是内容 div 的一部分。 然后，活动项目可以具有看起来延伸到内容中的背景。 这要简单得多，并且可以避免很多令人头痛的事情。

Answer 3

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

Answer 4

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

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

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