Siempre es el contexto de apilamiento.

En “ ¿Qué diablos, índice z? ”, Josh Comeau hace la analogía de los grupos de capas en software de diseño como Photoshop o Figma con el apilamiento de contextos en CSS. Si tiene un elemento en un grupo de capas A en Photoshop que está debajo del grupo de capas B, no hay nada que pueda hacer para colocar un elemento secundario de A encima de cualquier cosa en B, aparte de mover todo el grupo de capas A encima de B. , o deshacerse de las agrupaciones.

Aquí hay un caso reducido:

No hay ningún z-indexvalor que coloque “Gran cosa” encima del mainelemento bronceado allí. Pero como Josh señala en el artículo, hay una variedad de soluciones, como evitar que un contexto de apilamiento se active innecesariamente o mezclar un poco el DOM para que todo funcione. Como en el ejemplo anterior, “Big Thing” no necesita ser un elemento secundario del encabezado y, si no lo fuera, el contexto de apilamiento no sería tan relevante.

Si eres fanático de las herramientas que te ayudan a diagnosticar este tipo de cosas, lee hasta el final del artículo de Josh para conocer algunas interesantes.