¿Por qué z-index no funciona para div?

Question

Estoy tratando de mostrar mi pie de página en la parte superior del fondo del pie de página, pero parece que el índice z no está funcionando. ¿Alguien ve lo que está mal con eso? http://jsfiddle.net/f2ySC/

Answer 1

Tienes que explícitamente definen el position propiedad:

.footerBox { 
    background-color: #FFFFFF; 
    border: 10px solid #DDDDDD; 
    margin: 10px 0 -200px -10px; 
    width: 1185px; 
    z-index: 1000; 

    position:relative; 

} 

http://jsfiddle.net/f2ySC/1/

---

Esto hace que el pie de página en el current stacking context:

... La raíz formas de elementos el contexto de apilamiento de raíz. Otros contextos de apilamiento son generados por cualquier elemento posicionado (incluidos los elementos posicionados relativamente ) que tienen un valor calculado de 'z-index' que no sea 'auto'. Los contextos de apilamiento no están necesariamente relacionados con los bloques . En los futuros niveles de CSS, otras propiedades pueden introducir contextos de pila, por ejemplo 'opacidad' ...

http://www.w3.org/TR/CSS2/visuren.html#z-index

Answer 2

En footerbox establece el atributo position a absolute El nuevo código debe decir lo siguiente

.footerBox { 
    background-color: #FFFFFF; 
    border: 10px solid #DDDDDD; 
    margin: 10px 0 -200px -10px; 
    width: 1185px; 
    z-index: 1000; 
    position: absolute; 
} 

ver una demostración here

nosotros ing position: relative también funciona

Answer 3

¿Este es el efecto que está buscando? Updated example

he añadido a position: relative;#footerBack y .footerBox para permitir z-index

Answer 4

usando margen negativo no es una buena práctica. índice z: -1; funciona solo muestra el contenido en el fondo de otro div :)