Otworzyłem konsolę (chrome \ firefox) i uruchomiłem następujące linie:

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

Element #popupContent powinien być najważniejszy, ale ma na niego wpływ krycie #popupFrame.

Treść nie jest zawarta w #popupFrame, co czyni to bardzo dziwnym.

Celem jest stworzenie pola ostrzegawczego przypominającego firefox

Drugi div to position: static element (domyślny), więc indeks z nie ma do niego zastosowania.

Musisz ustawić (ustawić właściwość position na cokolwiek innego niż static, prawdopodobnie chcesz relativew tym przypadku) cokolwiek chcesz z-index.

Krycie zmienia kontekst twojego indeksu Z, podobnie jak statyczne pozycjonowanie. Albo dodaj krycie do elementu, który go nie ma, albo usuń go z elementu, który go ma. Będziesz także musiał ustawić oba elementy statycznie lub określić położenie względne lub bezwzględne. Oto kilka informacji na temat kontekstów: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Stare pytanie, ale ta odpowiedź może komuś pomóc.

Jeśli próbujesz wyświetlić zawartość kontenera poza granicami kontenera, upewnij się, że nie ma overflow:hidden, w przeciwnym razie wszystko poza nim zostanie odcięte.

z-indexdotyczy tylko elementów, którym nadano wyraźną pozycję. Dodaj position:relativedo #popupContent i powinieneś być gotowy.

Często napotykałem ten problem podczas używania position: absolute;, napotkałem ten problem, używając position: relativew elemencie potomnym. nie trzeba zmieniać position: absolutena relative, wystarczy dodać element podrzędny, spójrz na poniższe dwa przykłady:

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>

Oto jak można to naprawić za pomocą pozycji względnej:

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>

Tutaj piaskownica