Question

Imagine this DOM:

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

<div>
    content
</div>

Both header and nav are positioned as fixed.
The content div is positioned as relative.
I need to create a stack, with z-index, in this order (from top to bottom):

• header *:not(nav)
• content
• nav

I’m having a hard time putting nav in the bottom (in other words, under its parent’s sibling). I’m thinking that all header’s children have to go either on top or under its sibling… is this right? If so, is there a workaround for this situation?

Answer 1

Only content that is “positioned” such as position: absolute or position: fixed or position: relative will respect the z-index. As your HTML is structured, you can’t do what you’re asking for because parent/child is also respected so a child has to be in the parent (it can’t be a completely different z-index vs. the parent). To do what you want, you will have to break the nav out of the header and then they can each have their own z-index, one above and one below the default zero z-index of content.