3

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>

2 respuestas 2

2

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

2

En principio no es problema del z-index en si, si no que el div #opciones tiene la propiedad visibility cual oculta el elemento, pero sigue conservando el espacio que ocupaba.

Significa que #opciones hereda del padre #menu cual tiene z-index: 100; y por eso el enlace del #contenedor nunca se podrá ejecutar.

Lo puedes comprobar si cambias visibility a display: Ver ejemplo cual si funcionaria pero sin el efecto transition.

Una la solución sería poner el elemento <li> a height: 0;

$("#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;
  /* Eliminado ya que no afecta
  z-index:-1;
  position:relative; */
}

#menu li {
  height: 0;
}

#menu a.active ~ #opciones {
  opacity:1;
  visibility:visible;
  /* Eliminado ya que no afecta
  z-index:1; */
}

/* Eliminado ya que no afecta
#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>

La respuesta de @blonfu funciona pero el problema de su repuesta es que no se respeta el transition (ENLACE) al abrir el submenu.

Entonces la otra opción sería dejar solo al #opciones la posición relative:
(efecto secundario: less code):

$("#opcion").on("click", function() { $(this).toggleClass("active"); });
* {
  margin: 0;
  padding: 0;
}

html, body {
  background: #eee;
}

#menu {
  height: 50px;
  background: white;
  line-height: 50px;
  list-style: none;
}

#opciones {
  opacity: 0;
  visibility: hidden;
  background: white;
  transition: all 1s;
  position: relative;
  /* z-index: auto; por defecto */
}

#menu a.active ~ #opciones {
  opacity: 1;
  visibility: visible;
}
<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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.