1
상단 및 하단 요소 (div)가있는 웹 앱이 있는데 둘 다 position: fixed입니다. 이들 요소는 각각 position: fixed의 하위 요소 (팝업)를 가지고 있습니다.부모가 고정 위치에있는 요소로 z- 색인이 작동하지 않습니다.
위의 팝업을 상위 요소에 배치하려고합니다. 그러나 position: fixed을 사용하고 있기 때문에 부모로부터 상속되기 때문에 z-index 속성이 작동하지 않습니다.
비슷한 문제가 스택 오버플로에서 발생했음을 알았지 만 그 중 어느 것도이 문제에 대한 해결책을 제공하지 못했습니다. https://jsfiddle.net/pLsdspon/
<html>
<head></head>
<body style="height: 100%;">
<div style="
background-color: red;
\t position: fixed;
\t display: block;
\t width: 100%;
\t height: 50%;
\t top: 0%; \t \t \t
\t z-index: 2; ">
Top
<div style=" \t \t \t
\t \t background-color: pink;
\t \t position: fixed;
\t \t display: block;
\t \t width: 80px;
\t \t height: 200px;
\t \t top: 40%;
\t \t left: 100px;
\t \t z-index: 20; ">
PopUp-Top - Need to be on top!
</div>
</div>
<div style="
\t background-color: green;
\t position: fixed;
\t display: block;
\t width: 100%;
\t height: 50%;
\t top: 50%;
\t z-index: 2; ">
Bottom
<div style=" \t \t
\t \t background-color: lightgreen;
\t \t position: fixed;
\t \t display: block;
\t \t width: 80px;
\t \t height: 200px;
\t \t top: 40%;
\t \t left: 200px;
\t \t z-index: 20; ">
PopUp-Bottom - Need to be on top!
</div>
</div>
</body>
</html>
*'Z- 인덱스 : 1' * 당신의 녹색 DIV합니다. – vivekkupadhyay
# vivekkupadhya - 녹색 요소 Z- 색인을 1로 설정하면이 문제가 해결되지 않으며 두 번째 팝업은 –
아래에 표시됩니다. z- 색인은 형제와 만 작동하므로 팝업이 같은 수준에 있지 않으면 머리글 또는 바닥 글을 겹치게 할 때 부모 Z- 색인에 의해 정의됩니다. 팝업 인 경우 (즉, 표시/숨기기를 위해 일종의 j를 사용하는 경우), 팝업 표시를 설정하는 동시에 부모의 Z- 색인을 변경해야합니다. – Pete