Abrí la consola (chrome \ firefox) y ejecuté las siguientes líneas:

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

El #popupContent debería estar por encima de todo, pero se ve afectado por la opacidad de #popupFrame.

El contenido no está incluido en #popupFrame, lo que lo hace muy extraño.

El objetivo es crear un cuadro de alerta similar a Firefox

El segundo div es position: static(el predeterminado), por lo que el índice z no se aplica a él.

Necesita posicionar (establecer la propiedad de posición en cualquier cosa que no sea static, probablemente desee relativeen este caso) cualquier cosa que quiera darle z-index.

La opacidad cambia el contexto de su índice z, al igual que el posicionamiento estático. Agregue opacidad al elemento que no la tiene o elimínela del elemento que la tiene. También tendrá que hacer que ambos elementos estén en posición estática o especificar una posición relativa o absoluta. Aquí hay algunos antecedentes sobre contextos: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Antigua pregunta, pero esta respuesta podría ayudar a alguien.

Si está tratando de mostrar el contenido del contenedor fuera de los límites del contenedor, asegúrese de que no lo tenga overflow:hidden, de lo contrario, se cortará todo lo que esté fuera de él.

z-indexsólo se aplica a los elementos a los que se les ha dado una posición explícita. Agregue position:relativea #popupContent y estará listo para comenzar.

Enfrenté este problema mucho al usarlo position: absolute;, enfrenté este problema al usar position: relativeen el elemento secundario. no es necesario cambiar position: absolutea relative, solo es necesario agregar el elemento secundario, ver los dos ejemplos siguientes:

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>

Así es como se puede arreglar usando la posición 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 aquí