Z-index non si comporta come previsto con posizionamento assoluto all'interno di un elemento di posizione fissa

Question

Ho una situazione in cui ho 2 o più elementi di posizione fissi su una pagina visualizzata sovrapposta l'una sull'altra (cioè, la parte superiore del secondo si trova sul fondo del primo - nessun impilamento con z-index di quegli elementi). All'interno del primo elemento di posizione fissa, c'è un elemento assolutamente posizionato che è più alto del suo genitore fisso, quindi si estende oltre il fondo di quel genitore fisso.

Il problema è che il prossimo elemento di posizione fisso viene visualizzato sopra l'elemento posizionato in modo assoluto. Ho un valore z-index più alto impostato sull'elemento posizionato in modo assoluto rispetto agli elementi posizionati fissi, ma è completamente ignorato.

Per aiutare a chiarire il problema, ho messo insieme questo esempio:

HTML

<div class="fixed first"> 
    <p>This is a fixed element</p> 
    <p class="abs"> 
     I should be displayed above both fixed position elements 
    </p> 
</div> 
<div class="fixed second"> 
    <p>This is a fixed element</p> 
</div> 

CSS

.fixed { 
    font-size: 16px; 
    background: #eee; 
    border-bottom: 1px solid #ccc; 
    position: fixed; 
    height: 3em; 
    width: 100%; 
    z-index: 1; 
} 

.abs { 
    position: absolute; 
    background: #acc; 
    height: 6em; 
    top: 0; 
    left: 25%; 
    width: 50%; 
    z-index: 2; 
} 

.second { 
    top: 3.0625em; 
} 

Ecco l'esempio lavorare su JSFiddle:

http://jsfiddle.net/GS4E4/8/

Sono un po 'perplesso da questo. Qualcuno ha una spiegazione del perché questo sta accadendo e un modo per aggirarlo?

Answer 1

Come il commento di Pete allude, tutto si riduce a contesti impilabili. In questo caso, entrambi gli elementi .fixed creano i propri contesti di impilamento in virtù dell'essere position: fixed;. Il figlio del primo elemento .fixed crea un contesto di impilamento nidificato all'interno del relativo elemento principale. Poiché è annidato all'interno di un contesto di impilamento esistente, non può mai scoppiare e impilare più in alto; il suo z-index è relativo al suo genitore ora.

La specifica è in qualche modo utile con i dettagli: http://www.w3.org/TR/CSS2/visuren.html#z-index. Puoi vedere attraverso l'elenco numerato che i contesti di accatastamento dei bambini sono dipinti ultimi morti.

Quindi nel tuo caso, l'elemento .fixed.first dovrebbe avere uno z-index di 2 per il suo figlio da impilare in cima a .fixed.second.

Answer 2

Spostare .abs fuori da entrambe le div.

<div class="fixed first"> 
    <p>This is a fixed element</p> 
</div> 
<div class="fixed second"> 
    <p>This is a fixed element</p> 
</div> 
<p class="abs"> 
     I should be displayed above both fixed position elements 
    </p> 

Vedi http://jsfiddle.net/GS4E4/9/ Il modo in cui lo avete ora .abs è posizionato rispetto al .first in modo che siederà sopra .first ma non al di sopra .second, il vostro violino sta interpretando correttamente.