Skip to main content
1 de 3
user avatar
user avatar

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á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 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>

user7176