Question

Estoy intentando poner un menú despegable en la cabecera he creado un div con un z-index muy alto y position: absolute; el típico menú que se muestra y se oculta este menú despegable, invade el nav y un poco el section, el problema es que queda por debajo de estos elementos y tanto el nav como el section tiene un position: relative y un z-index bajo, osea que tendía que quedar tapados por el menú despegable y no al revés, al div le he puesto z-index: 5000; no hay ningún elemento tan alto, pero no sirve. No lo entiendo.

Comments

Si pones un enlace a tu web sería más fácil ayudarte, además de la explicación que @magarzon ya te da abajo.

Saludos.

Answer 1

Seguramente por cómo están organizados esos elementos, probablemente unos sean hijos de otros, y eso afecta a cómo funciona el z-index.

Por ejemplo, si el menú desplegable está dentro de otro elemento que también esté posicionado (absolute o relative), y tenga un z-index igual o más bajo que el del nav y el section, al final el que cuenta es el z-index del padre.

Por ejemplo, imagina que tienes esto:

<nav style="position: relative; z-index: 100"></nav>
<section style="position: relative; z-index: 100"></section>
<div class="container" style="position: relative; z-index: 100">
    <div class="mi_menu" style="position: absolute; z-index:5000"></div>
</div>

El div con class "mi_menu" NUNCA va a estar por encima del nav y el section, pues al final el que se aplica es el z-index del padre (container). El z-index del menu serviría solo para posicionarse sobre otros elementos hermanos y/o hijos, y sobre elementos que no tienen establecido z-index y/o posicionamiento (absolute o relative)

Comprueba tu jerarquía (o cópiala aquí y así podré darte una mejor respuesta)