Ich habe die Konsole geöffnet (Chrome \ Firefox) und die folgenden Zeilen ausgeführt:

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

Der #popupContent sollte vor allem sein, wird aber von der #popupFrame-Deckkraft beeinflusst.

Der Inhalt ist nicht in #popupFrame enthalten, was dies sehr seltsam macht.

Das Ziel ist es, eine Firefox-ähnliche Warnbox zu erstellen

Das zweite Div ist position: static(die Standardeinstellung), daher gilt der Z-Index nicht für ihn.

Sie müssen alles positionieren (setzen Sie die Positionseigenschaft auf etwas anderes als das static, was Sie wahrscheinlich relativein diesem Fall wollen), dem Sie ein geben möchten z-index.

Die Deckkraft ändert den Kontext Ihres Z-Index ebenso wie die statische Positionierung. Fügen Sie dem Element, das es nicht hat, entweder Deckkraft hinzu oder entfernen Sie es aus dem Element, das es hat. Sie müssen auch entweder beide Elemente statisch positionieren oder die relative oder absolute Position angeben. Hier einige Hintergrundinformationen zu Kontexten: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Alte Frage, aber diese Antwort könnte jemandem helfen.

Wenn Sie versuchen, den Inhalt des Containers außerhalb der Grenzen des Containers anzuzeigen, stellen Sie sicher, dass er nicht vorhanden ist overflow:hidden. Andernfalls wird alles außerhalb des Containers abgeschnitten.

z-indexgilt nur für Elemente, denen eine explizite Position zugewiesen wurde. Fügen Sie position:relative#popupContent hinzu und Sie sollten bereit sein zu gehen.

Ich habe dieses Problem bei der Verwendung häufig festgestellt position: absolute;. Ich habe dieses Problem bei der Verwendung position: relativeim untergeordneten Element festgestellt. nicht ändern müssen , position: absoluteum relative, müssen nur in das Kind Element Blick in die unter zwei Beispiele hinzu:

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>

So kann es mithilfe der relativen Position behoben werden:

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>

Sandkasten hier