[html] Z- 색인이 절대 위치에서 작동하지 않음
콘솔 (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(기본값)이므로 Z- 색인이 적용되지 않습니다.
당신은 당신이 제공하려는 모든 것을 배치해야합니다 ( 이 경우에는 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>여기에 샌드 박스
답변
