Abri o console (chrome \ firefox) e executei as seguintes linhas:

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

O #popupContent deve ser acima de tudo, mas é afetado pela opacidade #popupFrame.

O conteúdo não está contido em #popupFrame, o que torna isso muito estranho.

O objetivo é criar uma caixa de alerta semelhante ao Firefox

O segundo div é position: static(o padrão), portanto, o z-index não se aplica a ele.

Você precisa posicionar (definir a propriedade position para qualquer coisa diferente de static, você provavelmente deseja relativeneste caso) qualquer coisa que você queira dar z-index.

A opacidade muda o contexto do seu Z-index, assim como o posicionamento estático. Adicione opacidade ao elemento que não a possui ou remova-a do elemento que a possui. Você também terá que fazer ambos os elementos com uma posição estática ou especificar a posição relativa ou absoluta. Aqui estão algumas informações básicas sobre contextos: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Pergunta antiga, mas esta resposta pode ajudar alguém.

Se você estiver tentando exibir o conteúdo do contêiner fora dos limites do contêiner, certifique-se de que não o fez overflow:hidden, caso contrário, tudo fora dele será cortado.

z-indexsó se aplica a elementos que receberam uma posição explícita. Adicione position:relativea #popupContent e você estará pronto para começar.

Enfrentei muito esse problema ao usar position: absolute;, enfrentei esse problema usando position: relativeno elemento filho. não precisa mudar position: absolutepara relative, só precisa adicionar o elemento filho nos dois exemplos abaixo:

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>

É assim que pode ser corrigido usando a posição 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 aqui