Mientras realizaba un sitio web para un proyecto en el que colabore me encontré con la propiedad z-index, al usarla descubrí algunas de sus caracteristicas un poco más complejas.
Z-index es una propiedad que nos ayuda para especificar el orden de la pila de un elemento.
De forma simple el elemento con mayor orden para apilar siempre está delante de otro inferior, es decir, se apilan de mayor a menor.
CSS Sintaxis
z-index: auto|number|initial|inherit;
auto: Establece el orden de la pila igual a la del elemento padre.Es la opción predeterminada.
number: Puede tomar cualquier número incluso negativos y ordena los elementos de acuerdos a estos.
initial: Establece esta propiedad a su valor predeterminado.
inherit: Hereda la propiedad de su elemento principal.
¿Que esconde z-index?
Visto de esa forma suena muy sencillo sin embargo guarda algunos secretos que pueden llegar a complicar su uso.
- Solo funciona en elementos que tienen una posición (Absolute,Relative, Fixed etc).
- Su uso crea contextos de apilamiento.
Contextos de apilamiento
Grupo de elementos con un padre común que se mueve hacia adelante y hacia atrás juntos en el orden del apilamiento, esto es lo que entendemos por contexto de apilamiento.
Un contexto se forma de 3 maneras distintas.
a)Elemento raíz de HTML: Asigna a sus elementos hijos un lugar particular del orden, eso hace que si un elemento es contenido en un contexto de apilamiento en el más bajo orden no hay manera de que aparezca adelante.
b)Cuando un elemento tiene una posición static y un valor de z-index distinto a auto.
c)Un elemento tiene un valor de opacidad menor a 1.
Niveles en contexto de apilamiento.
Existen dentro de estos contextos siente niveles posibles de apilamiento.
- Fondo y bordes. Es el nivel más bajo de la pila.
- Z-Index Negativo.Contextos de elementos descendientes con z-index negativo.
- Cajas de Nivel Bloque. Descienden en Flujo normal, No posicionados.
- Cajas Flotantes. Flotantes no posicionados.
- Cajas en línea. Descendientes en flujo, en línea no posicionados.
- Z-index:0 Elementos posicionados.Estos forman nuevos contextos de apilamiento.
- Z-Index Positivo.Elementos posicionados.El nivel más alto en la pila.
Ejemplo de contextos
Para tratar de explicar de forma mas clara tomaremos el siguiente ejemplo, en donde tenemos 3 div con las siguientes características.
.div1, .div2, .div3 {
position: absolute;
width: 100px;
color: white;
line-height: 100px;
text-align: center;
}
.div1 {
z-index: 1;
top: 20px;
left: 20px;
background: red;
}
.div3 {
top: 60px;
left: 60px;
background: green;
}
.div2 {
top: 100px;
left: 100px;
background: blue;
}
<div> <span class="div1">Div1</span> </div> <div> <span class="div2">Div2</span> </div> <div> <span class="div3">Div3</span> </div>
¿Que es lo que pasa aquí? Cuando el z-index y las propiedades de posición no están declaradas, el orden de apilamiento es el mismo que el orden de aparición en el HTML.
Aquí tenemos dos contextos de apilamiento, el raíz (div2 y div3) y el formado por span.div1. Pero si agregamos opacidad al elemento span.div formamos un contexto de apilamiento y z-index de div1 aplica solo en este nuevo contexto.
Podemos decir que esta propiedad es muy útil,pero es importante que sepamos las implicaciones que esta tiene en nuestra web. Espero que la información se ha de utilidad para que puedan conocer un poco más sobre esta propiedad.
Si alguno de ustedes nos gusta compartir algo para comprender la mejor los esperamos en los comentarios.
Cesar Flores