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

Question

想象一下这个DOM:

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

<div>
    content
</div>

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

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

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

Answer 1

只有被"定位",例如内容position: absolute或者position: fixed或position: relative将尊重z-index.由于您的HTML是结构化的,您无法满足您的要求,因为父/子也受到尊重,所以孩子必须在父母中(它不能与父母完全不同的z-index) .做你想做什么,你将不得不打破nav了的header,然后他们可以各自有自己的z-index,一个在上面,一个内容的默认为零的z-index以下.