z-index no comportarse como yo esperaría

Question

así que tengo esto, más o menos:

<div id="A"> 
    <ul> 
     <li id="B">foo</li> 
    </ul> 
</div> 
<div id="C"> 
    ... 
</div> 

Estos se colocan de manera que B y C se solapan.

A tiene un z-index de 90, B tiene una z-index de 92, y C tiene un z-index de 91. Pero C aparece delante de B. ¿Qué estoy haciendo mal? (Avíseme si se necesitan más detalles.)

Answer 1

El uso de z-index solo es relevante para elementos en el mismo contenedor. Como B está contenido dentro de A, el índice z de B solo se aplicará al resolver otros elementos dentro de A. En lo que respecta a C, tanto B como A se representan en z-índice 90. Sin embargo, si C se coloca dentro de A, entonces B rendirá delante.

Answer 2

Si un elemento no tiene una posición: relativa/posición: absoluta/posición: estilo fijo, su posición: estática, que es el estilo de posición predeterminado para todos los elementos.

Con un elemento que está en la posición: estático, el índice z simplemente no funciona. El navegador representaría la pila en el orden del elemento xml e ignoraría la propiedad z-index.

Para una situación como esta para trabajar, hay que añadir position: relative a los 3 elementos, A, B, C

entender más acerca de z-index y apilado CSS, a la cabeza aquí: http://www.tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp