entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

z-index no esta funcionando

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.

1voto

Peter comentado

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.

1 Respuesta

2votos

magarzon Puntos30650

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)

0voto

bichomen comentado

Hola Pues si tienes razón, porque al final puse ese div en el index directamente y empezó a funcionar igualmente y sabía lo del padre, pero también le había puesto un z-index alto al header, lo que no tenia claro y tu me lo has aclarado es que si otros elementos tienen position absolute o relative, eso afecta, esto va a ser más complicado de arreglar pero sabiendolo no hay problema. Por otro lado, ¿todos los elemento por defecto no tienen position: relative?

Saludos

1voto

magarzon comentado

No, por defecto si no se pone nada el valor de position es static

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta