J'ai ouvert la console (chrome \ firefox) et exécuté les lignes suivantes:

$("body").append("<div id=\"popupFrame\" style=\"width:100%;height:100%;background-color:black;opacity:0.5;position:absolute;top:0;left:0;z-index:1;\" />");
$("body").append("<div id=\"popupContent\" style=\"width:200px;height:200px;z-index:1000;background-color:white;\" >dasdasdsadasdasdasdasdasd</div>");

Le #popupContent doit être avant tout mais il est affecté par l'opacité #popupFrame.

Le contenu n'est pas contenu dans #popupFrame, ce qui rend cela très étrange.

Le but est de créer une boîte d'alerte comme Firefox

Le deuxième div est position: static(la valeur par défaut) donc le z-index ne s'applique pas à lui.

Vous devez positionner (définir la propriété position sur autre chose que static, vous voulez probablement relativedans ce cas) tout ce que vous voulez donner z-index.

L'opacité change le contexte de votre z-index, tout comme le positionnement statique. Ajoutez de l'opacité à l'élément qui ne l'a pas ou supprimez-la de l'élément qui en a. Vous devrez également rendre les deux éléments statiques positionnés ou spécifier une position relative ou absolue. Voici quelques informations générales sur les contextes: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Ancienne question mais cette réponse pourrait aider quelqu'un.

Si vous essayez d'afficher le contenu du conteneur en dehors des limites du conteneur, assurez-vous qu'il n'y en a pas overflow:hidden, sinon tout ce qui se trouve en dehors sera coupé.

z-indexs'applique uniquement aux éléments qui ont reçu une position explicite. Ajoutez position:relativeà #popupContent et vous devriez être prêt à partir.

J'ai beaucoup rencontré ce problème lors de l'utilisation position: absolute;, j'ai rencontré ce problème en utilisant position: relativedans l'élément enfant. ne pas besoin de changer position: absolutepour relative, juste besoin d'ajouter dans le regard de l' élément enfant dans le sous deux exemples:

let toggle = document.getElementById('toggle')

toggle.addEventListener("click", () => {
 toggle.classList.toggle('change');
})

.container {
  width: 60px;
  height: 22px;
  background: #333;
  border-radius: 20px;
  position: relative;
  cursor: pointer;

}

.change .slide {
  transform: translateX(33px);
}

.slide {
  transition: 0.5s;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 20px;
  margin: 2px 2px;
  z-index: 100;
}

.dot {
  width: 10px;
  height: 16px;
  background: red;
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 1;
}

<div class="container" id="toggle">
  <div class="slide"></div>
  <div class="dot"></div>
</div>

Voici comment cela peut être corrigé en utilisant la position relative:

let toggle = document.getElementById('toggle')

toggle.addEventListener("click", () => {
 toggle.classList.toggle('change');
})

.container {
  width: 60px;
  height: 22px;
  background: #333;
  border-radius: 20px;
  position: relative;
  cursor: pointer;

}

.change .slide {
  transform: translateX(33px);
}

.slide {
  transition: 0.5s;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 20px;
  margin: 2px 2px;
  z-index: 100;
  
  // Just add position relative;
  position: relative;
}

.dot {
  width: 10px;
  height: 16px;
  background: red;
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 1;
}

<div class="container" id="toggle">
  <div class="slide"></div>
  <div class="dot"></div>
</div>

Sandbox ici