La poderosa propiedad z-index de CSS

En este artículo, aprenderá cómo utilizar la z-indexpropiedad CSS… ¡La única forma de ingresar a la tercera dimensión con CSS!

La mayoría de las veces, cuando se diseñan elementos con CSS, se hace en un plano 2D. Los elementos HTML se colocan horizontal o verticalmente en la página como bloques apilados en Tetris. Esto z-indexcambia este paradigma y te da la posibilidad de definir una jerarquía visual en el tercer plano: el eje z.

En este fragmento de código, #navbar, se superpondrá a #footer(si su posición se superpone) porque tiene un índice z más alto.

#navbar {  position: relative;  z-index: 11;}#footer {  position: relative;  z-index: 10;}

Si no lo usáramos z-indexen absoluto, la barra de navegación simplemente empujaría el pie de página en lugar de superponerlo.

Usos paraz-index

Mirar el código por sí solo es un poco abstracto, así que veamos esta demostración donde z-indexse usa.

Vea el bolígrafo eYZEoVL de alligatorio (@alligatorio) en CodePen.

div  img src="https://assets.digitalocean.com/articles/docker_node_image/sammy.png" //divdiv  Sammy the Shark/div

#portrait {  position: relative;  z-index: 1  width: 200px;}#magazine-title {  position: relative;  z-index: 2;  top: -2em;  left: 2em;  font: normal 2em sans-serif;  color: darkslategray;  background-color: whitesmoke;  border: 3px dotted darkslategray;}

Con z-index, podemos hacer que el texto se superponga a la imagen. Esta es solo una pequeña forma en que las capas presentan una forma diferente de pensar sobre el diseño web.

Una pequeña advertencia

Si tiene buen ojo, probablemente haya notado que los fragmentos de código anteriores se usaron position: relativejunto con z-index. Esto no fue una coincidencia: la z-indexregla solo funciona en "elementos posicionados".

Olvidar aplicar una positionregla implicará efectivamente ignorarla z-index.

div {  position: static | relative | absolute | sticky | fixed;  z-index: 1;}

Aelemento posicionadoes un elemento HTML que puede ser relativo, absoluto, fijo o fijo. Básicamente, es cualquier cosa que no sea estática.

Rivalidad entre hermanos

Otra pequeña nota es que z-indexsolo compite entre elementos HTML hermanos.

Dados dos elementos HTML, el elemento HTML profundamente anidadoSiempre se superpondrá con un elemento HTML menos anidado con un valor de índice z más bajo.

A continuación se muestra una demostración que muestra que z-indexsolo compite entre elementos HTML hermanos:

div  div/div  div/div/divdiv/div

.blue {  position: relative;  z-index: 2;  background-color: blue;}.violet {  position: relative;  z-index: 4;  background-color: violet;}.purple {  position: relative;  z-index: 1;  background-color: purple;}.green {  position: relative;  z-index: 3;  background-color: green;  top: -4em;}

¡El elemento HTML div.violetse superpondrá div.greena pesar de tener un z-indexvalor más alto!

Los valores z-indexdeben ser un número entero positivo o negativo. Esto no significa que pueda tener capas ilimitadas en el eje z. El rango máximo es ±2147483647.

En las bases de código CSS, a menudo verás valores de índice z de 999, 9999 o 99999. Esta es una forma quizás poco precisa de garantizar que el elemento esté siempre en la parte superior. Puede generar problemas en el futuro cuando sea necesario que varios elementos estén en la parte superior. La mayoría de las veces, descubrirás que un índice z de 1 o 2 será suficiente para tus necesidades.

Terminando

Repasemos algunas de las cosas que hemos aprendido sobre z-index:

• z-index¡Puede crear capas superpuestas en el eje z!
• z-indexSólo funciona con elementos posicionados.
• z-indexSólo compite con elementos HTML hermanos

¡Al superponer contenido se pueden crear diseños interesantes! Esperamos que tengas una buena idea de cómo z-indexfunciona y algunas pautas para que puedas usarlo con éxito.

Visite MDN para obtener documentación detallada sobre la z-indexpropiedad.