Tôi đã mở bảng điều khiển (chrome \ firefox) và chạy các dòng sau:

$("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 phải ở trên tất cả nhưng nó bị ảnh hưởng bởi độ mờ #popupFrame.

Nội dung không có trong #popupFrame, điều khiến điều này trở nên rất kỳ lạ.

Mục đích là tạo firefox giống như hộp cảnh báo

Div thứ hai là position: static(mặc định) nên z-index không áp dụng cho nó.

Bạn cần định vị (đặt thuộc tính vị trí thành bất kỳ thứ gì khác static, có thể bạn muốn relativetrong trường hợp này) bất kỳ thứ gì bạn muốn cung cấp z-index.

Độ mờ đục thay đổi ngữ cảnh của chỉ mục z của bạn, cũng như định vị tĩnh. Thêm độ mờ đục vào phần tử không có hoặc xóa nó khỏi phần tử có. Bạn cũng sẽ phải đặt cả hai phần tử ở vị trí tĩnh hoặc chỉ định vị trí tương đối hoặc tuyệt đối. Dưới đây là một số thông tin cơ bản về ngữ cảnh: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Câu hỏi cũ nhưng câu trả lời này có thể giúp ích cho ai đó.

Nếu bạn đang cố gắng hiển thị nội dung của vùng chứa bên ngoài ranh giới của vùng chứa, hãy đảm bảo rằng nó không có overflow:hidden, nếu không bất cứ thứ gì bên ngoài nó sẽ bị cắt bỏ.

z-indexchỉ áp dụng cho các phần tử đã được đặt một vị trí rõ ràng. Thêm position:relativevào #popupContent và bạn sẽ sẵn sàng.

Tôi đã đối mặt với vấn đề này rất nhiều khi sử dụng position: absolute;, tôi đã đối mặt với vấn đề này bằng cách sử dụng position: relativetrong phần tử con. không cần thay đổi position: absolutethành relative, chỉ cần thêm phần tử con vào xem hai ví dụ bên dưới:

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>

Đây là cách nó có thể được sửa bằng cách sử dụng vị trí tương đối:

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>

Hộp cát ở đây