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.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies
Share This
A %d blogueros les gusta esto: