Cómo funciona la propiedad z-index en CSS

El posicionamiento de los elementos en CSS es una parte fundamental a la hora de diseñar tu página web. Situar cada elemento HTML en donde corresponde no es solo un tema de estética, sino que un buen posicionamiento también mejora la experiencia del usuario y determina la utilidad de los elementos. En este post, por este motivo, te presentamos la propiedad z-index en CSS, una variable clave para determinar el orden de los elementos en la profundidad de tu página web.

Posicionamiento de elementos en CSS

El posicionamiento de elementos en CSS no es un tema de discusión común, porque los navegadores tienen una forma automática de leer nuestro código y posicionar elementos en la pantalla. Sin embargo, existen varias maneras de sobrescribir este sistema automático y situar nuestros elementos HTML a voluntad.

Dentro de CSS, puedes utilizar la propiedad position para situar tus elementos HTML. En KeepCoding llamamos a este método el «posicionamiento clásico», pues utiliza las propiedades básicas del programa. Te invitamos a leer nuestro post sobre el posicionamiento clásico para entender cómo utilizarlo a la hora de estructurar tu página web. CSS también nos permite utilizar otras metodologías como FlexBox o CSSGrid. Todas estas opciones nos permiten modificar la ubicación automática que el navegador le da a nuestros elementos HTML.

Ten en cuenta que el sistema del navegador ubicará los elementos de manera automática en dos situaciones: si no hay un valor determinado para la propiedad position (si esta no está presente) o si el programador ha determinado el valor static. El valor static o valor estático es el valor por defecto de la propiedad position. Este valor quiere decir que el elemento no tiene un posicionamiento específico y que el navegador usará su sistema automático para ubicarlo.

Sea cual sea el método que uses para ubicar tus elementos en la pantalla, siempre que haya un valor diferente a static en la propiedad position, podrás utilizar la propiedad z-index en CSS para determinar el orden de los elementos y sus descendientes.

¿Qué hace la propiedad z-index en CSS?

La propiedad z-index en CSS determina el orden de los elementos posicionados en una página web. Un elemento posicionado es aquel que tiene un valor diferente a static en su propiedad position. Como su nombre lo indica, la propiedad z-index en CSS determina el orden de los ejemplos en el eje z. Mientras las propiedades left y right determinan la ubicación de los elementos en el eje x, y las propiedades top y bottom determinan su ubicación en el eje y, la propiedad z-index determina su ubicación en relación a las capas de la página web.

La propiedad z-index en CSS define el orden de los elementos en el eje z según el número que el programador le otorga a cada uno. Esto quiere decir que podemos ordenar los elementos que se superponen en una página web asignándoles un valor numérico en su z-index. Los elementos con valores más altos cubrirán aquellos con valores menores. Si queremos asegurarnos que un elemento esté encima de todos los demás, le daremos un valor alto como 99. Del mismo modo, si queremos que un elemento se mantenga siempre atrás, como una imagen de fondo, le otorgaremos un valor bajo, como 1, o incluso un valor negativo.

Esta propiedad también puede tener una palabra clave como valor. Al escribir «z-index: auto», le estaremos diciendo al navegador que no hemos establecido un nuevo orden para la superposición de elementos. Esto quiere decir que el navegador utilizará el orden de nuestro código para determinar qué se verá en la primera capa.

Darle el valor auto a la propiedad z-index en CSS es como darle un valor 0. Si usamos el modo automático o si le damos el mismo valor z-index a dos elementos, veremos en la primera capa al elemento que esté último en nuestro código. Esto sucede porque el navegador pinta los elementos siguiendo el orden de arriba abajo de nuestro código. Al leer dos elementos con el mismo z-index, el navegador los ordenará como si estuvieran en la misma capa, pero pintará encima al último que leyó.

Te recomendamos ir a la página oficial de la Mozilla Developer Network para ver en vivo los efectos de modificar un z-index. También te invitamos a revisar este ejercicio de la página web w3schools, en el que puedes jugar con el número z-index de la caja roja e incluso ver el resultado cuando le das el valor auto.

¿Te animas a seguir aprendiendo?

En KeepCoding sabemos que, con cada nuevo dato que aprendes sobre CSS y HTML, crecen tus ganas de seguir aprendiendo sobre estos importantes lenguajes de programación web. Ahora que sabes cómo funciona la propiedad z-index en CSS y cómo usarla para dar orden a los elementos HTML en un sitio web, ¡es el momento de que crees y diseñes tu propia página web con estética y utilidad!

Por ello, te recomendamos nuestro bootcamp intensivo Desarrollo Web Full Stack Bootcamp. En él aprenderás, entre muchas otras cosas, cómo usar HTML y CSS para crear páginas web accesibles, únicas y útiles. Al final, presentarás tu propia página web, que crearás con estos conocimientos. ¿A qué esperas para cumplir tu sueño de ser un desarrollador web profesional? ¡No dudes en pedir más información e inscríbete ya!