Saya membuka konsol (chrome \ firefox) dan menjalankan baris berikut:

$("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 harus di atas segalanya, tetapi dipengaruhi oleh opasitas #popupFrame.

Konten tersebut tidak terdapat dalam #popupFrame yang membuatnya sangat aneh.

Tujuannya untuk membuat firefox seperti alert box

Div kedua adalah position: static(default) sehingga indeks-z tidak berlaku untuk itu.

Anda perlu memposisikan (mengatur properti posisi ke apa pun selain static, yang mungkin Anda inginkan relativedalam kasus ini) apa pun yang ingin Anda berikan z-index.

Opasitas mengubah konteks indeks-z Anda, seperti halnya pemosisian statis. Tambahkan opasitas ke elemen yang tidak memilikinya atau hapus dari elemen yang memilikinya. Anda juga harus membuat kedua elemen diposisikan statis atau menentukan posisi relatif atau absolut. Berikut beberapa latar belakang konteks: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Pertanyaan lama tapi jawaban ini mungkin bisa membantu seseorang.

Jika Anda mencoba untuk menampilkan konten wadah di luar batas wadah, pastikan tidak ada overflow:hidden, jika tidak apa pun di luar itu akan terpotong.

z-indexhanya berlaku untuk elemen yang telah diberi posisi eksplisit. Tambahkan position:relativeke #popupContent dan Anda siap melakukannya.

Saya sering menghadapi masalah ini saat menggunakan position: absolute;, saya menghadapi masalah ini dengan menggunakanposition: relative elemen anak. tidak perlu berubah position: absolutemenjadi relative, hanya perlu menambahkan elemen anak, lihat di bawah dua contoh:

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>

Beginilah cara memperbaikinya menggunakan relatif posisi:

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>

Kotak pasir di sini