html - Z-index:使元素位于其父元素的兄弟元素之下

Question

想象一下这个 DOM:

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

<div>
    content
</div>

标题和导航都定位为固定。 内容 div 定位为 relative。 我需要按以下顺序(从上到下)创建一个带有 z-index 的堆栈:

• 标题 *:not(nav)
• 内容
• 导航

我很难将 nav 放在底部(换句话说，在其父项的兄弟项下)。我在想所有标题的 child 都必须在其 sibling 之上或之下......这是对的吗？如果是这样，是否有针对这种情况的解决方法？

Answer 1

只有“定位”的内容，例如 position: absolute 或 position: fixed 或 position: relative 才会遵守 z-索引。由于你的 HTML 是结构化的，你不能做你要求的，因为 parent / child 也受到尊重，所以 child 必须在 parent 中(它不能是完全不同的 z-index 与 parent ) .要做你想做的事，你必须将 nav 从 header 中分离出来，然后它们每个都可以有自己的 z-index，一个在默认的零 z-index 内容上方，一个在下方。