我打开控制台（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的警报框
Answers:
不透明度和静态位置一样会更改z-index的上下文。向不具有透明度的元素添加不透明度，或者从不具有透明度的元素中删除不透明度。您还必须使两个元素都静态定位或指定相对或绝对位置。以下是上下文的一些背景：http : //philipwalton.com/articles/what-no-one-told-you-about-z-index/
使用position: absolute;时我经常遇到这个问题，我position: relative在child元素中使用时遇到了这个问题。无需更改position: absolute为relative，只需添加child元素即可查看以下两个示例：
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>