Я открыл консоль (chrome \ firefox) и запустил следующие строки:

$("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 должен быть выше всего, но на него влияет непрозрачность #popupFrame.

Контент не содержится в #popupFrame, что делает это очень странным.

Цель состоит в том, чтобы создать окно предупреждения, подобное firefox.

Второй div position: static(по умолчанию), поэтому z-index к нему не применяется.

Вам нужно позиционировать (установить для свойства position любое другое значение, кроме того static, что вы, вероятно, захотите relativeв этом случае) все, что вы хотите передать z-index.

Непрозрачность изменяет контекст вашего z-индекса, как и статическое позиционирование. Либо добавьте непрозрачность к элементу, у которого ее нет, либо удалите ее с элемента, у которого ее нет. Вам также нужно будет либо сделать оба элемента статическими, либо указать относительное или абсолютное положение. Вот некоторая предыстория контекстов: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Старый вопрос, но этот ответ может кому-то помочь.

Если вы пытаетесь отобразить содержимое контейнера за пределами контейнера, убедитесь, что его нет overflow:hidden, иначе все, что находится за его пределами, будет обрезано.

z-indexприменяется только к элементам, которым было дано явное положение. Добавьте position:relativeв #popupContent, и все будет хорошо.

Я часто сталкивался с этой проблемой при использовании position: absolute;, я столкнулся с этой проблемой при использовании position: relativeв дочернем элементе. не нужно менять position: absoluteна relative, просто нужно добавить дочерний элемент, посмотрите следующие два примера:

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>

Вот как это можно исправить с помощью относительного положения:

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>

Песочница здесь