Ho aperto la console (chrome \ firefox) e ho eseguito le seguenti righe:

$("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>");

Il #popupContent dovrebbe essere soprattutto ma è influenzato dall'opacità #popupFrame.

Il contenuto non è contenuto in #popupFrame, il che lo rende molto strano.

L'obiettivo è creare una casella di avviso simile a Firefox

Il secondo div è position: static(il valore predefinito) quindi z-index non si applica ad esso.

Devi posizionare (impostare la proprietà position su qualcosa di diverso da static, probabilmente vuoi relativein questo caso) qualsiasi cosa tu voglia dare z-indexa.

L'opacità cambia il contesto del tuo z-index, così come il posizionamento statico. O aggiungi opacità all'elemento che non lo ha o rimuovilo dall'elemento che lo ha. Dovrai anche rendere statici entrambi gli elementi posizionati o specificare la posizione relativa o assoluta. Ecco alcuni retroscena sui contesti: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Vecchia domanda ma questa risposta potrebbe aiutare qualcuno.

Se stai tentando di visualizzare il contenuto del contenitore al di fuori dei confini del contenitore, assicurati che non lo sia overflow:hidden, altrimenti qualsiasi cosa al di fuori di esso verrà tagliata.

z-indexsi applica solo agli elementi a cui è stata assegnata una posizione esplicita. Aggiungi position:relativea #popupContent e dovresti essere a posto.

Ho affrontato questo problema molto durante l'utilizzo position: absolute;, ho affrontato questo problema utilizzando position: relativel'elemento figlio. non è necessario passare position: absolutea relative, è sufficiente aggiungere l'elemento figlio, esaminare i due esempi seguenti:

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>

Ecco come può essere risolto usando la posizione relativa:

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 qui