Voy a poner un ejemplo, en el siguiente código hay tres elementos diferentes, todos con posicionamiento relativo y valores diferentes de z-index
:
- el menú tiene un valor de 100
- el submenú (sólo activo cuando se pulsa en el enlace) tiene un valor de -1 cuando está oculto, y de 1 cuando está visible.
- el contenido tiene un z-index de 2.
Parecería que al ocultarse el submenú (en cuyo caso su z-index
sería -1), éste no debería verse ni interferir... pero de hecho se queda por encima del contenido (que tiene un z-index
de 2) y no deja pulsar sobre el ENLACE.
¿Por qué ocurre eso? ¿Cómo se calcula el z-index
de un elemento con respecto al del resto de elementos? ¿Cómo afecta el z-index
de sus ancestros?
$("#opcion").on("click", function() { $(this).toggleClass("active"); });
* {
margin:0;
padding:0;
}
html, body {
background:#eeeeee;
}
#menu {
height:50px;
background:white;
line-height:50px;
list-style:none;
position:relative;
z-index:100;
}
#menu #opciones {
opacity:0;
visibility:hidden;
background:white;
transition: all 1s;
z-index:-1;
position:relative;
}
#menu a.active ~ #opciones {
opacity:1;
visibility:visible;
z-index:1;
}
#contenedor {
position:relative;
z-index:2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul id="menu">
<li>
<a href="#" id="opcion">Menu 1</a>
<div id="opciones">
<a href="#opcion1">Opcion 1</a>
<a href="#opcion2">Opcion 2</a>
<a href="#opcion3">Opcion 3</a>
</div>
</li>
</ul>
<div id="contenedor">
<a href="#enlace">ENLACE</a>
</div>