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和ul属于同一stacking context。这意味着z-index不得创建任何堆叠上下文，因此请勿为其设置任何z-index。请参阅Which CSS properties create a stacking context?了解应该避免的内容。

然后很容易：只需将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>

{{1}}

用z-index交换非兄弟姐妹

4 个答案: