用z-index交换非兄弟姐妹

Question

我正在尝试让侧边栏菜单与内容重叠div,其中活动菜单项出现在其上div,非活动项目将显示在下面.a ul和a之间的交点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 索引和毛茸茸的 CSS 黑客吗？您可以做的一件事是为菜单提供重复的背景，以便它的一部分看起来是内容 div 的一部分。然后，活动项目可以具有看起来延伸到内容中的背景。这要简单得多，并且可以避免很多令人头痛的事情。