z-index Superponer capas con CSS

Ago 23, 2017 | CSS, Diseño, DIVI (Elegant Themes)

Logo-CSS3

Por defecto, el flujo de trabajo en HTML hace que las capas se vayan superponiendo unas encima de otras, conforme se van construyendo.

A muchos les habrá ocurrido que han querido romper ese flujo y han deseado colocar una imagen que supuestamente está en una capa inferior delante de otra y buscando una solución, han encontrado la propiedad z-index, pero por mucho que la implementan, esta parece no funcionar.

En este post voy a explicar el pequeño detalle que seguro a alguno se le habrá pasado por alto y es por ello que esta propiedad no les funciona.

Vamos a partir de la siguiente imagen

 

En principio vamos a darle a la imagen de abajo un margin-top negativo de -150px para que se solape con la imagen superior.

Ahora queremos colocar el sol delante del paisaje, por lo que le colocaremos en css personalizado un z-index de 2 y al paisaje un z-index de 1.

Como podemos observar, la cosa sigue igual y ahí es donde nos entra la frustración. El truco está en colocar la propiedad position: relative; tanto a la imagen de arriba como a la de abajo.

Y este sería el resultado

Como veis, con este simple cambio en el CSS el problema se soluciona.

Bueno, espero que os haya gustado y si es así espero vuestros comentarios.

Share This
A %d blogueros les gusta esto: