Z-index：make元素位于其父级的兄弟之下

Question

想象一下这个DOM：

<header>
    <h1> header </h1>
    <!-- other elements -->
    <nav>
        nav
    </nav>
</header>

<div>
    content
</div>

标题和导航都定位为fixed。 内容div的位置为relative。 我需要按照这个顺序（从上到下）创建一个带有z-index的堆栈：

• 标题*：不是（nav）
• 含量
• NAV

我很难将导航放在底部（换句话说，在其父母的兄弟之下）。我认为所有头衔的孩子都不得不在顶部或在其兄弟之下......这是对的吗？如果是这样，是否有针对这种情况的解决方法？

Answer 1

只有“定位”的内容（例如position: absolute或position: fixed或position: relative）才会尊重z-index。由于您的HTML是结构化的，您无法满足您的要求，因为父/子也受到尊重，所以孩子必须在父母中（它不能与父母完全不同的z-index） 。要做你想做的事，你必须打破nav header，然后他们每个人都有自己的z-index，一个在上面，一个在默认零z-index之下内容。

Answer 2

使用DOM布局的唯一解决方法是使用负z-index值。但是，强烈建议不要使用负值，就像不建议使用负边际值一样。

更好的解决方案是重构DOM。您可能会发现this很有用。它解释了推荐使用z-index属性的方法。

希望这能帮到你！