El z-index
suele crear un poco de confusión.
La propiedad z-index
se aplica a elementos posicionados, es decir, con cualquier valor en position
que no sea static
(la posicion por defecto de los elementos es static
). No se hereda y aquí surge el primer punto de confusión porque aunque no se hereda si afecta a los hijos, el z-index
es para un elemento y su contenido, igual que opacity
o transform
que afectan a como se ven los elementos hijos porque forman parte del contenido, si pongo opacity: 0.5
a un elemento todos sus hijos trendrántendrán esa transparencia también.
En tu caso el submenú queda por encima del contenido porque su padre tiene un z-index
mayor que el contenido que está al mismo nivel. Lo que puedes hacer es quitar la posicion al menú para que su z-index
no aplique y tenga en cuenta el del submenú y poner un z-index
a #opciones
(cuando el enlace tiene la clase active
) superior al del contenido.
$("#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;
}
#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:3;
}
#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>