Z- 색인이 절대 위치에서 작동하지 않음

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/

---

z-index명시적인 위치가 지정된 요소에만 적용됩니다. position:relative#popupContent에 추가 하면 갈 수 있습니다.

---

오래된 질문이지만이 답변은 누군가를 도울 수 있습니다.

컨테이너의 경계 외부에 컨테이너의 내용을 표시하려는 경우에는이 없는지 확인하십시오 overflow:hidden. 그렇지 않으면 외부의 모든 항목이 잘립니다.

참고 URL : https://stackoverflow.com/questions/14483589/z-index-not-working-with-position-absolute