Z-index: rendere elemento andare sotto fratello del suo genitore

Question

immaginare questo DOM:

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

<div> 
    content 
</div> 

Sia intestazione e navigatore sono posizionati come fixed. Il contenuto div è posizionato come relative. necessario creare una pila, con z-index, in questo ordine (dall'alto in basso):

• intestazione *: senza (nav)
• contenuto
• navigatore

Sto facendo fatica a mettere nav in basso (in altre parole, sotto il fratello dei suoi genitori). Sto pensando che tutti i bambini di intestazione debbano andare in cima o sotto il fratello ... è giusto? Se è così, c'è una soluzione alternativa per questa situazione?

Answer 1

Solo il contenuto "posizionato" come position: absolute o position: fixed o position: relative rispetterà lo z-index. Poiché il tuo HTML è strutturato, non puoi fare ciò che stai chiedendo perché anche il genitore/figlio è rispettato, quindi un bambino deve essere nel genitore (non può essere uno z-index completamente diverso rispetto al genitore) . Per fare ciò che vuoi, devi interrompere lo nav dello header e poi ognuno di essi può avere il proprio z-index, uno sopra e uno sotto lo zero z-index predefinito del contenuto.

Answer 2

L'unica soluzione per questo, con il layout DOM è di utilizzare valori z-index negativi. Tuttavia, non è consigliabile utilizzare valori negativi, proprio come non è consigliabile utilizzare valori di margine negativo.

Una soluzione migliore sarebbe ristrutturare il DOM. È possibile trovare utile this. Spiega i modi consigliati di usare la proprietà z-index.

Spero che questo ti aiuti!