Cuando estamos al frente de nuestra computadora, con una página web abierta, lo que vemos es en dos dimensiones, pero con ayuda de CSS intentamos darle un percepción tridimensional, un eje-Z imaginario. Para superponer un elemento encima o debajo de otro podemos usar la propiedad z-index desde el CSS.
El renderizado de ciertos elementos HTML está influenciado por sus valores z-index. Esto se debe a que los div y otros elementos generan un contexto de acoplamiento.
¿Y esto para que?
En algún momento nos hemos enfrentado a un div que está por detrás de otro y empezamos a aumentar la propiedad z-index de nuestro CSS hasta niveles astronómicos 😅. Pero nuestro elemento rebelde no sobrepone al div… Para estos tipos de casos es importante entender el concepto de contexto de acoplamiento en css y como sacar ventaja del mismo, y claro no volvernos locos con nuestros divs rebeldes.
La forma mas facíl de entenderlo es mediante un ejemplo:
https://codepen.io/Cristhian2121/pen/XWxGJJO
See the Pen
Contexto de acoplamiento CSS by Cristhian (@Cristhian2121)
on CodePen.
Se puede ver que el div#5 tiene un z-index: 1; y el div#2 un z-index: 2. A simple vista el z-index del elemento #5 es menos que el #2 y con todo esto esta por encima que el elemento con mayor z-index ¿Qué pasa aquí?
El elemento #5 está dentro del elemento #3 y esta es la clave, por el que este elemento #3 tiene un z-index: 4, que es mayor al del elemento #2 y basados en la teoría del contexto de acoplamiento ciertos elementos generan un nuevo contexto de acoplamiento, en este caso nuestro elemento div.
Para mas información aqui
