콘솔 (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- 색인의 컨텍스트를 변경합니다. 불투명도를 가지고 있지 않은 요소에 불투명도를 추가하거나 그렇지 않은 요소에서 제거하십시오. 또한 두 요소를 모두 정적으로 배치하거나 상대 또는 절대 위치를 지정해야합니다. 컨텍스트에 대한 배경 정보는 다음과 같습니다. http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
를 사용할 때이 문제에 많이 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>