Imagine this DOM:\[code\]<header> <h1> header </h1> <other elements/> <nav> nav </nav></header><div> content</div>\[/code\]Both header and nav are positioned as \[code\]fixed\[/code\].The content div is positioned as \[code\]relative\[/code\].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?
