コンソール（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のようなアラートボックスを作成することです
回答:
静的な配置と同様に、不透明度はZ-indexのコンテキストを変更します。不透明度のない要素に不透明度を追加するか、不透明度のある要素から不透明度を削除します。また、両方の要素を静的に配置するか、相対位置または絶対位置を指定する必要があります。コンテキストの背景は次のとおりです。http：//philipwalton.com/articles/what-no-one-told-you-about-z-index/
を使用するときにこの問題に多くposition: absolute;直面しposition: relativeました。子要素で使用することによってこの問題に直面しました。に変更position: absoluteする必要はありません。relative子要素を2つの例の下に追加するだけです。
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>