z-index in css non funziona

Question

Questo div

<div style="position: relative; z-index: 99;">123</div> 

è mostrato sopra di questo

<div style="position: fixed; z-index: 3000;">456</div> 

Quando assegno z-index: 98 nel primo div tutto bene! Posso fornire più codice se necessario.

Answer 1

Su questo violino non è: http://jsfiddle.net/kcgCX/

credo che debba essere qualcosa di diverso nel codice che cambia. esso.

Answer 2

z-index è orientato al suo genitore - sono entrambi nello stesso elemento genitore? z-index implementa un proprio stack, ad esempio:

I riquadri D, E e F sono discendenti da Box C -> Box F (z-index: -1) sovrapposti alla casella B (z-index: 1) perché è il discendente dalla casella c (questo è con z-index: 3 su box b)

<div style="position:absolute; top:100px; left:100px; z-index:2; border:1px solid #888; background:#f88;"> 
    <b>A:2</b><img src="hund.gif" width="208" height="181" alt="Hund"> 
</div> 

<div style="position:absolute; top:130px; left:130px; z-index:1; border:1px solid #888; background:#88f;"> 
    <b>B:1</b><img src="hund.gif" width="208" height="181" alt="Hund"> 
</div> 

<div style="position:absolute; top:190px; left:270px; width:280px; height:280px; z-index:3; 
      border:1px solid #888; background:#eee;"> 
    <b>C:3</b> 

    <div style="position:absolute; top:30px; left:-30px; z-index:2; border:1px solid #888; background:#8f8;"> 
    <b>D:2</b><img src="hund.gif" width="208" height="181" alt="Hund"> 
    </div> 

    <div style="position:absolute; top:-30px; left:40px; z-index:3; border:1px solid #888; background:#ff8;"> 
    <b>E:3</b><img src="hund.gif" width="208" height="181" alt="Hund"> 
    </div> 

    <div style="position:absolute; top:60px; left:-60px; z-index:-1; border:1px solid #888; background:#8ff;"> 
    <b>F:-1</b><img src="hund.gif" width="208" height="181" alt="Hund"> 
    </div> 
</div> 

Answer 3

ritengo il problema potrebbe essere che

<div style="position: fixed; z-index: 3000;">456</div> 

ha posizione fissa, secondo a questo sito: http://www.kavoir.com/2008/12/css-z-index-doesnt-work.html, gli z-index funzionano solo con posizioni relative o assolute, ecco perché il suo div funziona con il tuo z-index.

Se non è il caso, direi che non hai creato correttamente il codice HTML.

Spero che questo utile sia utile.

Answer 4

Protip: Se si dispone di un piccolo container enought (Ej 100px di altezza.), E hanno un grande children (Ej, 200px), anche con z-index ben setted, i bambini non saranno pienamente visibili se il contenitore ha la proprietà overflow: hidden.