Я відкрив консоль (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(за замовчуванням) , так що г-індекс не відноситься до нього.

Вам потрібно позиціонувати (встановити властивість позиції нічим іншим, ніж 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>

Пісочниця тут