z-index de CSS no funciona

Question

este div

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

se muestra por encima de éste

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

Cuando le asigno z-index: 98 en principio todo de div bien! Puedo proporcionar más código si es necesario.

Answer 1

En esta violín no lo es: http://jsfiddle.net/kcgCX/

Creo que debe haber algo más en su código que cambia. eso.

Answer 2

z-index se está orientando en su matriz: ¿están ambos en el mismo elemento primario? z-index implementa una pila propia, por ejemplo:

Las casillas D, E y F son descendientes del casillero C -> Casilla F (índice z: -1) superpuesto al casillero B (índice z: 1) porque es el descendiente de la caja de c (éste es con z-index: 3 sobre la caja 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

creo que el problema podría ser que

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

tiene la posición fija, de acuerdo a este sitio: http://www.kavoir.com/2008/12/css-z-index-doesnt-work.html, los índices z solo funcionan con posiciones relativas o absolutas, por eso su ot su div funciona con tu z-index.

Si ese no es el caso, diría que no compiló su HTML correctamente.

Espero que esta información sea útil.

Answer 4

Protip: Si usted tiene una pequeña container lo suficientemente (Ej 100px de altura.), Y tiene un children más grande (Ej, 200 píxeles), incluso con z-index así Setted, los niños no serán plenamente visibles si el contenedor tiene la propiedad overflow: hidden.