z-index 문제! 정보
z-index 문제!본문
<div class='menu'>
<ul>
<li class='item'>QPD
<div class='detail'><ul>
<li>첫번째메뉴</li>
<li>두번째메뉴</li>
</ul></div>
</li>
</ul>
</div>
대략 이런식으로 구성되어있습니다.
근데 detail에 z-index가 20이고 menu의 z-index가 21인데
detail의 border선이 menu 위로 나옵니다... 왜그런지 이해가 안되네요.
위 소스는 메뉴바 소스로 item을 mouseover하면 css hover로 detial이 하단메뉴로 출력됩니다..
혹시 아시는 분 계신가요?!!
<ul>
<li class='item'>QPD
<div class='detail'><ul>
<li>첫번째메뉴</li>
<li>두번째메뉴</li>
</ul></div>
</li>
</ul>
</div>
대략 이런식으로 구성되어있습니다.
근데 detail에 z-index가 20이고 menu의 z-index가 21인데
detail의 border선이 menu 위로 나옵니다... 왜그런지 이해가 안되네요.
위 소스는 메뉴바 소스로 item을 mouseover하면 css hover로 detial이 하단메뉴로 출력됩니다..
혹시 아시는 분 계신가요?!!
댓글 전체
먼저 z-index를 떠나서 부모가 더 크다면 당연히 border는 보여집니다.
왜냐하면 border는 실제 콘텐츠 영역에 포함 되지 않습니다.
최 외곽부터 순서로 따지자면
margin
--------
border
--------
padding
--------
content
--------
padding
--------
border
--------
margin
의 계층적 구조를 가집니다.
그 중에서 content영역과 padding 영역이 실제 width와 height를 대변 할 수있습니다.
그 영역을 넘어서 부모가 border를 가지고 있다면 자식이 absolute를 가지지 않는 이상 혹은 부모에게 overflow 속성이 존재 하지 않아 자식이 튕겨져 버리지 않는 이상 부모의 border를 덮을 순 없는 것이죠.
왜냐하면 border는 실제 콘텐츠 영역에 포함 되지 않습니다.
최 외곽부터 순서로 따지자면
margin
--------
border
--------
padding
--------
content
--------
padding
--------
border
--------
margin
의 계층적 구조를 가집니다.
그 중에서 content영역과 padding 영역이 실제 width와 height를 대변 할 수있습니다.
그 영역을 넘어서 부모가 border를 가지고 있다면 자식이 absolute를 가지지 않는 이상 혹은 부모에게 overflow 속성이 존재 하지 않아 자식이 튕겨져 버리지 않는 이상 부모의 border를 덮을 순 없는 것이죠.
