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이 하단메뉴로 출력됩니다..
혹시 아시는 분 계신가요?!!
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 1개
왜냐하면 border는 실제 콘텐츠 영역에 포함 되지 않습니다.
최 외곽부터 순서로 따지자면
margin
--------
border
--------
padding
--------
content
--------
padding
--------
border
--------
margin
의 계층적 구조를 가집니다.
그 중에서 content영역과 padding 영역이 실제 width와 height를 대변 할 수있습니다.
그 영역을 넘어서 부모가 border를 가지고 있다면 자식이 absolute를 가지지 않는 이상 혹은 부모에게 overflow 속성이 존재 하지 않아 자식이 튕겨져 버리지 않는 이상 부모의 border를 덮을 순 없는 것이죠.