Colocar elementos a distintas profundidades en una web con CSS

Durante el proceso de diseño de una página web es bastante habitual posicionar elementos a diferentes niveles de profundidad. Esto es algo que con aplicaciones como Photoshop o Figma podemos realizar de un modo sencillo ya que sólo debemos centrarnos en el aspecto gráfico. Sin embargo trasladar esto a maquetación web puede resultar algo tedioso, sobre todo si eres un maquetador principiante, ya que debemos tener en cuenta el ajuste de las capas en base al contenido o a la resolución de pantalla.

Por el motivo anterior me gustaría hacer una entrada para comentar diferentes modos de colocar elementos dentro de una página web a diferentes profundidades y haciendo uso sólo de CSS. Dependiendo de qué debamos adaptar, la solución puede ser diferente e incluso para un mismo caso pueden haber soluciones diferentes, de modo que voy a tratar de indicar múltiples técnicas que servirán para poder maquetar la mayoría de las situaciones.

Imagen o color en el fondo

Esta creo que es la situación más básica que podemos encontrarnos. Un bloque de contenido tiene una imagen o un color de fondo y por encima se encuentra el contenido.

Para hacer esto podemos valernos de la propiedades background-imagen o background-color. Con ellas es posible aplicar un fondo al elemento donde las asignemos, que normalmente será un contenedor de tipo div o similar. En su forma más sencilla podríamos aplicarlas del siguiente modo:

.imagen-fondo{
    background-image: url("imagen.jpg");
}
.color-fondo{
    background-color: #9406c2;
}

Sin embargo puede que el diseño sea algo más complejo y necesite que vayamos un poco más allá. Imaginemos que necesitemos usar una combinación entre darle al fondo un color y colocar por encima una imagen que tenga transparencia. En este caso podemos combinar ambas propiedades en un único elemento:

.fondo-combinado{
    background-image: url("imagen.png");
    background-color: #9406c2;
}

Podemos ir incluso un paso más, combinar un color de fondo con varias imágenes apiladas unas encima de otras. Incluso si quisiéramos, en lugar de usar una tinta plana como color de fondo podríamos añadir un degradado CSS, todo ello usando sólo la propiedad background-image ya que los degradados se rasterizan como mapas de bits en pantalla. La posición de la imagen como valor dentro de la propiedad será lo que determinará el orden de pintado de la primera, que se situará más al frente, a la última que estará más al fondo.

.fondo-combinado{
    background-image: url("imagen.png");
    background-color: #9406c2;
}

Recuerda que para poder jugar con las profundidades es importante que las imágenes que uses tengan transparencia, de lo contrario si usas opacas como puede ser el caso del formato jpg, únicamente verás la que esté situada más al frente.

Superposición de elementos

Otra posibilidad con la que nos encontramos a la hora de realizar la maquetación de un diseño web es que los elementos se superpongan unos sobre otros. En este caso los colores e imágenes de fondo se nos quedan cortos para lograr un cierto nivel de complejidad. Sin embargo sí que disponemos de otras técnicas que nos facilitan la labor.

Para lograr este tipo de superposiciones vamos a valernos de dos propiedades CSS: por un lado la propiedad position, que nos permite indicar la posición de un elemento respecto al resto, y por otro lado usaremos z-index, con la que podremos controlar la profundidad.

Supongamos que tenemos dos elementos y queremos que uno se sitúe encima del otro, pero queremos tener libertad para poder moverlos donde queramos. Utilizando position: absolute modificaremos el flujo natural de elementos para que puedan ocupar el mismo espacio pero a distinto nivel de profundidad. El primer elemento se situará debajo y el segundo encima.

.elemento1{
    position: absolute;
    left: 50%;
    top: 50%;
}
.elemento2{
    position: absolute;
    left: 50%;
    top: 50%;
}

Ahora supongamos que tenemos más de dos elementos y que además necesitamos poder controlar la profundidad de manera individual, con independencia del orden natural en el que se hayan introducido dentro de HTML. Para ello añadiremos z-index y le asignaremos un valor numérico. Este valor no importa en sí mismo, podemos usar los números que queramos, sólo tienes que quedarte un número superior hará que el elemento se sitúe por encima del resto.

.elemento3{
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
}
.elemento4{
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
}
.elemento5{
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
}

Los ejemplos anteriores puedes aplicarse a cualquier tipo de elemento, ya sean divs, párrafos o imágenes y podemos combinarlos como queramos. Sólo debes tener en cuenta que la propiedad position: absolute funciona de un modo especial, por lo que para poder manejarla con soltura te invito a que profundices más en el enlace que encontrarás más arriba.

See the Pen Elementos a distintas profundidades con CSS by Jesús Tovar (@jesustovar) on CodePen.

Como maquetador web freelance desde hace ya bastantes años, he tenido que utilizar estas y otras soluciones en múltiples ocasiones. Por suerte los estándares web han ido evolucionando con el tiempo para hacer la vida cada vez más sencilla al desarrollador y actualmente podemos resolver casi cualquier reto que se nos presente a nivel de diseño.

Ten en cuenta que un diseño web puede ser tan sencillo o complejo como requieran las circunstancias o decida el profesional. Es por eso que abarcar todas las situaciones con las que nos encontraremos es prácticamente imposible, sin embargo creo que la muestra que he dado sí que es representativa de la mayoría de los casos. En cualquier caso si crees que estaría bien añadir alguna más que conozcas te invito a dejarla en los comentarios.