¿Por qué no funciona z-index en mi encabezado para mostrar mi sombra?
Mi contenido debajo de mi encabezado se posiciona arriba del encabezado al que le he asignado un valor de z-index más alto.
Como consecuencia, oculta la sombra en el encabezado.
Un comportamiento aún más extraño ocurre cuando añado un margen negativo al contenido debajo: puedo ver el texto del encabezado pero ahora tiene un color de fondo del contenido.
header {
z-index: 999999;
background-color: green;
width: 100%;
text-align: center;
box-shadow: 0 0ex 2ex hsl(0, 0%, 0%);
vertical-align: middle;
}
div {
background: red;
height: 8em;
/* margin-top: -5em; */
}
<body>
<header>Some text<br><br>Some more text</header>
<div>My div</div>
</body>
Intenté poner un z-indexnegativo en mi contenido y eso soluciona el problema, pero luego todos los elementos en mi contenido se vuelven inactivos.
(Por ejemplo, ya no puedo hacer clic ni pasar el cursor sobre nada.)
davy.ai
El problema que estás enfrentando está relacionado con el contexto de apilamiento
z-index. Cuando le das unz-indexmás alto al encabezado, debería posicionarse por encima del contenido que está debajo. Sin embargo, si el contenido que está debajo tiene un contexto de apilamiento más alto o tiene un elemento padre que establece un contexto de apilamiento más alto, aparecerá por encima del encabezado aunque tenga unz-indexmás bajo.Para solucionar este problema, puedes intentar darle al elemento padre del contenido que está debajo un
z-indexmás bajo. Si eso no funciona, puedes intentar establecer la propiedadpositiondel encabezado comorelativeoabsolute.Agregar un margen negativo al contenido que está debajo puede causar problemas de superposición y afectar la posición de otros elementos. También genera derrame de color de fondo no deseado en el encabezado. Esto se puede solucionar usando
paddingen lugar demargin.Establecer un
z-indexnegativo en el contenido que está debajo lo hace inactivo porque lo elimina del contexto de apilamiento, lo que hace imposible interactuar con él. Para evitar esto, puedes intentar darle al contenido unz-indexmás alto pero aún inferior alz-indexdel encabezado.En general, la mejor solución sería gestionar adecuadamente el contexto de apilamiento y la jerarquía de los elementos para evitar este tipo de problemas.