Z-index en Css: el apilamiento de cajas y sus valores negativos 15.10.14

Z-index en Css: el apilamiento de cajas y sus valores negativos

Z-index es esa propiedad que nos permite colocar los elementos encima/sobre unos de otros cuando hay superposiciones.

Pero recuerda que por el modelo de cajas de Css, por definición, los elementos del html ocupan su lugar y fuerzan al resto a que lo respeten. Muy educados ellos. Así que para haya solapamientos hay que modificar dicho comportamiento desplazando alguno de ellos.

Lo que dicen las especificaciones es muy sencillo: se aplica a cualquier elemento posicionado (position≠static), los valores posibles admitidos son auto | Nº entero | inherit (por defecto: auto) y que no se hereda.

Aquí surge el primer malentendido. Porque pese a no heredarse, resulta que el elemento con valor z-index crea una "caja" para él y todo su contenido. Así que sus hijos, a efectos del apilamiento, estarán en el mismo nivel de z-index.

El segundo malentendido surge cuando se declaran valores negativos para z-index.

Valores negativos en Z-index

Por muy elevado que sea su valor en negativo no salen de la caja de apilamiento de su padre. Si para el padre z-index vale 10, aunque le asignes un valor de -50 a sus hijos, estos hijos siempre estarán sobre otros elementos hermanos de su padre que tengan un valor menor de 10.

Vamos con un ejemplo y sus códigos:
Tengamos dos familias de div´s, la de D. Antonio y la de D. José, con sus respectivos hijos y nietos:

Le aplicamos el Css correspondiente para que monten unos sobre otros y para poderlos diferenciar le asignamos fondos y bordes. Y ahora aplicamos el z-index:

Fíjate bien en los valores de z-index de la familia de DonJose y la de DonAntonio (su hijo SrAnton con -10 y su nieto (Tonino -100). Y este es el resultado, tanto en Firefox, Chrome, IE9, Safari y Opera en Windows:

DonAntonio y toda su familia se posicionan sobre DonJose y la suya por tener un z-index mayor. Y no importa qué valores se declaren a los hijos y nietos. El valor de los padres mandan. Pese a que SrPepe y sus dos hijos tienen un z-index de 25 y SrAnton y Toni de -10 y Tonino de -100 siguen estando arriba tanto de la familia DonJose como del mismo DonAntonio.

Para el único que influye el z-index -100 de Tonino es para posicionarlo respecto a su hermano Toni. Pese a tener un -100 está sobre toda la familia de DonJose (z-index=5), sobre su abuelo DonAntonio (z-index=6) y su padre SrAnton (z-index=-10).

Dicho de una manera menos familiar, y utilizando la nomenclatura de la especificidad de los selectores, podría decirse que el valor final del z-index está compuesta por cada uno de los valores de sus ancestros y el suyo propio:
DonJose = 5
SrPepe = 5,25
DonAntonio = 6
SrAnton = 6,-10
Tonino = 6,-10,-100

Padres sobre los hijos

Entonces, si quieres que los hijos se coloquen bajo su padre ¿cómo hacer? Sencillo, no declarar z-indez en el padre. Y no declarar es no declarar. Si das un valor cualquiera, incluido el 0, ya crea la caja de apilamiento y coloca a sus hijos dentro.

Y si algún ancestro ya tiene z-index

En el caso que el abuelo tenga declarado un z-index y quieras que los nietos de éste estén sobre su padre (Tonino sobre DonAntonio) te remito al inicio del artículo, a sobre qué elementos aplica el z-index: basta que al padre le declares position: static . Y eureka: hijos con z-index negativo debajo del padre.

Así que si quieres esconder un elemento debajo del body, sólo tienes que aplicarle un valor negativo al elemento y al body no declararle z-index (o que su position sea static). Sin olvidar que el elemento debe ser hijo directo del body o que los ancestros del elemento no tengan z-index.

Z-index y los vídeos

Otro quebradero de cabeza muy frecuente es la mala costumbre de los vídeos de no hacer caso a la propiedad z-index.
Por mucho que declares position y por más z-index que apliques tienen la mala costumbre de ignorarlo y quedar siempre arriba.

La solucción es sencilla, pero en este caso no es vía css, tienes que ir al código html y añadir al objet el atributo v-mode y uno de los dos valores opaque || transparent tal que así:

Un caso real con el código que suministra youtube:

Artículo publicado originalmente el 16/05/012 y actualizado el 15/10/2014

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso