Konsolu (chrome \ firefox) açtım ve aşağıdaki satırları çalıştırdım:

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

#PopupContent her şeyden önce olmalıdır ancak #popupFrame opaklığından etkilenir.

Bunu çok tuhaf kılan içerik # popupFrame'de yer almıyor.

Amaç, Firefox benzeri uyarı kutusu oluşturmaktır

İkinci div position: static(varsayılan) olduğundan z-endeksi ona uygulanmaz.

staticVermek istediğiniz herhangi bir şeyi konumlandırmanız (position özelliğini relative, bu durumda muhtemelen isteyeceğinizden başka bir şeye ayarlayın ) z-indexgerekir.

Opaklık, statik konumlandırmada olduğu gibi z-endeksinizin içeriğini değiştirir. Ya ona sahip olmayan öğeye opaklık ekleyin ya da sahip olan öğeden kaldırın. Ayrıca, her iki öğeyi de statik konumlandırmanız veya göreceli veya mutlak konumu belirtmeniz gerekir. Bağlamlarla ilgili bazı arka plan bilgileri: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Eski soru ama bu cevap birine yardımcı olabilir.

Kabın içindekileri kabın sınırları dışında görüntülemeye çalışıyorsanız, içinde olmadığından emin olun overflow:hidden, aksi takdirde kabın dışındaki hiçbir şey kesilecektir.

z-indexyalnızca açık bir konum verilen öğeler için geçerlidir. position:relative# PopupContent'e ekleyin ve gitmekte fayda var.

Kullanırken bu sorunla çok position: absolute;karşılaştım, bu sorunu position: relativealt öğede kullanarak karşılaştım . değiştirmeye position: absolutegerek yoktur relative, sadece aşağıdaki iki örneğin alt elemanına bakmanız yeterlidir:

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>

Konum göreli kullanılarak şu şekilde düzeltilebilir:

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 burada