Lo Que Quizá Desconozcas Sobre La Propiedad Z-Index

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

La propiedad z-index de CSS parece bastante simple, pero hay mucho que descubrir bajo la superficie, si realmente quieres entender cómo funciona. En este tutorial aclararemos los entresijos de z-index, analizando los contextos de apilamiento y algunos ejemplos prácticos.

CSS proporciona tres diferentes esquemas de posicionamiento para la composición de cajas:

el flujo normal del documento
los flotados
el posicionamiento absoluto

El último elimina completamente un elemento del flujo normal y se apoya en el desarrollador para que éste indique al elemento dónde mostrarse.

Tú aportas los valores superior, izquierdo, inferior y derecho a la posición del elemento en el espacio bidimensional, pero CSS también permite colocarlo en la tercera dimensión mediante la propiedad z-index.

En la superficie, z-index parece una propiedad fácil de usar. Estableces valores para determinar dónde, en este tercer eje, se ubicará el elemento y ya está listo. Bajo de la superficie hay mucho más en lo que profundizar, incluyendo un número de reglas sobre qué tipo de elementos se posicionan sobre otros.

Comencemos por lo básico para asegurarnos de que partimos del mismo punto y luego hablaremos de apilamiento para entender más de lo que sucede con z-index entre bastidores.

Fundamentos de Z-Index

Estoy seguro que estás familiarizado con el espacio de coordenadas tridimensional. Tenemos un eje x que se utiliza normalmente para representar las coordenadas horizontales, un eje y para las verticales y un eje z para representar lo que sucede dentro y fuera de la página, o la pantalla en nuestro caso.

3-Dimensional Coordinate Space — Espacio de Coordenadas de 3 Dimensiones

Nosotros no vemos el eje z literalmente, ya que la pantalla es un plano bi-dimensional. Lo vemos en la forma de perspectiva y de algunos elementos apareciendo en frente o detrás de otros elementos cuando comparten el mismo espacio bi-dimensional.

Para determinar en donde a lo largo de este tercer eje está ubicado un elemento, CSS nos permite establecer tres valores en la propiedad z-index.

auto (el valor por defecto)
(integer)
inherit

Por el momento concentrémonos en el valor integer. Este puede ser positivo, negativo, o 0. Entre más grande el valor, más cerca aparece el elemento al espectador. Entre más bajo el valor, más lejos aparece.

Si dos elementos son posicionados para que puedan ocupar un área compartida de espacio bi-dimensional, el elemento con el z-index mayor oscurecerá u obstruirá el elemento con el z-index más bajo en las áreas en donde comparten espacio.

Estoy asumiendo que lo de arriba es lo suficientemente sencillo de entender y muy probablemente se comporta exactamente como esperas. Sin embargo, hay algunas preguntas sin responder por ahí.

¿Cuál aparece encima cuando un elemento posicionado con un z-index superpone a un elemento en el flujo normal del documento?
¿Cuál aparece encima cuando un elemento es posicionado y uno es flotado?
¿Qué sucede cuando elementos posicionados están anidados dentro de otros elementos posicionados?

Para responder estas preguntas necesitamos entender más sobre cómo funciona z-index, específicamente la idea de contextos de apilamientos, niveles de apilamiento, y ordenes de apilamiento.

Contextos de Apilamiento y Niveles de Apilamiento

Los contextos de apilamiento y niveles de apilamiento pueden ser un poco difíciles de contextualizar, así que por un momento, imagina una mesa con un montón de elementos encima de esta. La mesa representa un contexto de apilamiento. Si hay una segunda mesa después de la primera, esa representa otro contexto de apilamiento.

Stacking Contexts and Stacking Levels — El contexto de apilamiento 1 está formado por la raíz del documento. Ambos contextos de apilamiento 2 y 3 son niveles de apilamiento en el contexto de apilamiento 1. Cada uno también forma un nuevo contexto de apilamiento con nuevos niveles de apilamiento dentro.

Ahora imagina que sobre la primer mesa hay cuatro bloques pequeños, todos directamente yaciendo sobre la mesa. Encima de estos cuatro bloques está un plato de cristal y encima del plato de cristal está un tazón de fruta. Los bloques, plato de cristal, y tazón de fruta cada uno representa un nivel de apilamiento dentro del contexto de apilamiento que es la mesa.

Un contexto de apilamiento individual por defecto es creado para cada página web. La raíz de este contexto (la mesa) es el elemento html. Todo dentro de la etiqueta html yace en un nivel de apilamiento dentro de este contexto de apilamiento por defecto (los objetos yaciendo sobre la mesa).

Cuando asignas un valor z-index diferente a auto a un elemento, creas un nuevo contexto de apilamiento con nuevos niveles de apilamiento que son independientes de otros contextos de apilamiento y niveles de apilamiento en la página. Traes otra mesa al cuatro sobre la que yacen objetos.

Orden de Apilamiento

La manera más sencilla de entender el orden de apilamiento es con un simple ejemplo, tan simple que ni siquiera consideraremos elementos posicionados por un momento.

Piensa en una página web muy simple. Además de los <html>, <head>, <body>, etc. por defecto encontrarás en toda página web que hay un solo <div>. En tu archivo CSS estableces el color de fondo del elemento html a azul. En el div, estableces valores valores para ancho y alto y un fondo de color rojo.

¿Qué esperas ver cuando cargues la página?

Ojalá no te haya tomado demasiado imaginar una pantalla mayormente azul con excepción de un bloque de color rojo que tiene las dimensiones que estableciste para el ancho y alto del div. El bloque rojo está probablemente en la esquina superior izquierda de la página a menos que hayas dejado volar tu imaginación un poco y le hayas dado más css para mostrarlo en algún otro lugar.

Podrías estar pensando "y qué, eso es bastante obvio", pero lo que podría no ser tan obvio es por qué ves un bloque rojo encima de un fondo azul. ¿Por qué ves el div encima del elemento html? La razón es porque ambos están siguiendo reglas de orden de apilamiento.

En el caso de este simple ejemplo, las reglas dicen que los bloques descendientes en el flujo normal (el div) yacen en un nivel más alto que los fondos y bordes del elemento raíz (el elemento html). Ves el div encima porque está en un nivel de apilamiento mayor.

Mientras que el ejemplo de arriba solo contiene un apilamiento de dos noveles, hay siete niveles posibles en cada contexto de apilamiento, que están listados abajo.

Fondo y bordes - del elemento formando el contexto de apilamiento. El nivel más bajo en la pila.
Z-Index Negativo --- los contextos de apilamiento de elementos descendientes con z-index negativo.
Cajas de Nivel de Bloque --- descendientes en-flujo no-nivel-en-línea no-posicionados.
Cajas Flotadas --- flotantes no posicionados
Cajas En Línea --- descendientes en-flujo nivel-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.

Stacking Order — Los siete niveles en un contexto de apilamiento

Estos siete niveles forman las reglas de orden de apilamiento. Un elemento en nivel siete se mostrará encima (más cerca del espectador) que elementos en niveles uno a seis. Un elemento en nivel cinco se muestra arriba de un elemento en nivel dos. Un elemento en... bueno ya tienes la idea.

La primera vez que encontré las reglas de orden de apilamiento arriba, unas cuantas cosas me saltaron a la vista. Si solo ves los niveles dos, seis, y siete (en donde z-index es mencionado), encaja en lo que probablemente asumes sobre z-index. El z-index positivo está en un nivel más alto que z-index 0, el cuál está en un nivel más positivo que z-index negativo. Ahí es donde probablemente la mayoría de nosotros dejamos de pensar en todas estas capas de apilamiento, sin embargo.

Antes de estas reglas asumiría que todo lo demás era equivalente a un z-index de 0. Claramente eso no es así. De hecho casi todo yace en un nivel bajo el nivel z-index = 0.

Lo que también es interesante es que elementos no-posicionados están ubicados en cuatro niveles diferentes de apilamiento. Tiene sentido cuando lo piensas. Si todos los elementos no-posicionados estuvieran en el mismo nivel de apilamiento, no veríamos texto (caja en línea) encima de un div (caja a nivel de bloque).

Poniéndolo todo Junto

Un par de veces mencioné crear nuevos contextos de apilamiento. Cuando asignas un valor z-index diferente a auto a un elemento creas un nuevo contexto de apilamiento, independiente de otros contextos de apilamiento.

Pensemos de nuevo en mesas como contextos de apilamiento. Antes, teníamos una mesa y encima de la mesa había cuatro bloques, un plato de cristal y un tazón de fruta. Imagina que la segunda mesa que introdujimos también tiene cuatro bloques del mismo tamaño y un plato de cristal encima, pero no un tazón de fruta.

Esperarías que el tazón de fruta de la mesa uno fuera el elemento más alto en la habitación. Este yace en el nivel más alto (tiene el z-index más grande). ¿Qué pasaría sin embargo si moviéramos la mesa uno y todo encima de esta al sótano? Ese tazón de fruta ahora estaría más abajo que todo sobre la mesa dos, porque la mesa uno misma ha sido movida a un nivel más bajo que la mesa dos.

Lo mismo pasa con elementos posicionados en una página web. Considera el marcado y estilo de abajo. ¿El div.two se mostrará arriba o abajo del div.four?

HTML:

<div class="one">
  <div class="two"></div>
  <div class="three"></div>
</div>
<div class="four"></div>

CSS:

div {
  width: 200px;
  height: 200px;
  padding: 20px;
}

.one, .two, .three, .four {
  position: absolute;
}
 
.one {
  background: #f00;
  outline: 5px solid #000;
  top: 100px;
  left: 200px;
  z-index: 10;
}
 
.two {
  background: #0f0;
  outline: 5px solid #000;
  top: 50px;
  left: 75px;
  z-index: 100;
}

.three {
  background: #0ff;
  outline: 5px solid #000;
  top: 125px;
  left: 25px;
  z-index: 150;
}

.four {
  background: #00f;
  outline: 5px solid #ff0;
  top: 200px;
  left: 350px;
  z-index: 50;
}

Incluso aunque div.two tiene el z-index mayor (100), de hecho yace bajo div.four (z-index = 50) en la página. Puedes ver el resultado del código de arriba en la imagen de abajo. Los bordes negro y amarillo muestran los diferentes contextos de apilamiento en los que está cada elemento.

Ya que div.two está contenido dentro de div.one, su z-index es relativo a la pila de div.one. En efecto lo que tenemos en realidad es lo siguiente:

.one — z-index = 10
.two — z-index = 10.100
.three — z-index = 10.150
.four — z-index = 50

Lo que hemos hecho es mover div.one y todo lo que contiene debajo de div.four. Sin importar que valores establecimos en la propiedad z-index de elementos dentro de div.one estos siempre se mostrarán debajo de div.four.

Si eres como yo, esto probablemente te ha confundido una o dos veces cuando trabajas con z-index. Ojalá estos ejemplos te ayuden a aclarar por qué un elemento con un z-index mayor algunas veces termina mostrándose detrás de otro elemento con un z-index menor.

Conclusión

Cuando la encuentras por primera vez, la propiedad z-index parece una propiedad muy simple de entender. Los valores representan una ubicación sobre un eje hacia dentro y fuera de la pantalla, y eso es todo.

Un vistazo más profundo a z-index revela que hay un poco más sucediendo tras bambalinas. Hay contextos de apilamiento, niveles de apilamiento y reglas para determinar qué elemento se muestra más arriba o más abajo en el orden de apilamiento.

Los elementos posicionados pueden crear nuevos contextos de apilamiento, y niveles enteros de apilamiento se mostrarán arriba o abajo de todos los niveles en otro contexto de apilamiento.

Lecturas Adicionales

Lo Que Nadie Te Dijo Sobre Z-Index por Phillip Walton
La Propiedad CSS Z-Index: Una Mirada Exhaustiva en Smashing Magazine
¿Qué Tan Bien Entiendes el Posicionamiento CSS?
El contexto de apilamiento en Mozilla Developer Network
Z-Indez Y El Apilamiento CSS: ¿Cuál Elemento Se Muestra Primero?