상단 및 하단 (높이에 calc ()을 사용하는 div) 분할 창으로 설정된 페이지가 있으며 상단 div에는 상단 div를 오버레이하는 절대 위치 div가 있습니다. https://jsfiddle.net/b2mb79ev/1/의 HTML + CSS 아래
<div id="everything">
<div id="top">
<div id="free"></div>
</div>
<div id="bottom"></div>
</div>
</div>
#everything {
width: 400px;
height: 400px;
}
#top {
height: calc(50%);
width: 100%;
background: blue;
}
#free {
position: absolute;
top: 50px;
left: 300px;
height: 200px;
width: 50px;
background: yellow;
border: 3px solid black;
}
#bottom {
height: calc(50%);
width: 100%;
background: rgba(0,255,0,0.6);
}
그러나 절대적으로 배치 된 div가 하단 div에 침입하지 않기를 바랍니다. 하단 div가 항상 '상위'레이어에 있기를 원합니다. jsfiddle에서 노란색 비트가 녹색 비트로 들어가는 것을 원하지 않습니다.
그러나 내가 수집 할 수있는 것에서 상단 및 하단 div는 규칙적으로 흐르는 요소이기 때문에 항상 동일한 수준을 가지며 Z- 인덱스를 인식하지 않습니다. Z- 인덱스를 사용하여 둘 다 위 또는 아래에 절대적으로 배치 된 div를 가질 수 있지만 위와 아래에 하나는 없습니까?
내가 원하는 것을 할 수있는 방법이 있습니까?
position:relative#bottom div에 비 정적 위치 (예 :)를 설정하여 원하는 스택 컨텍스트 를 제공하면 됩니다.
#bottom {
height: calc(50%);
width: 100%;
background: rgba(0, 255, 0, 0.6);
position:relative;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다