Hi~ Summers!!

Z-index 속성 본문

개발/JSP&HTML

Z-index 속성

eNaNII 2007. 7. 26. 11:04
Z-index 속성
여러 개의 box가 서로 겹쳐지게 보이도록 하는 속성이다.


z-index : auto | 숫자
Position 속성의 값이 absolute나 relative인 요소에 적용되며, 상속되지 않는다. 초기값은 auto이다.

auto : 쓴 순서대로 쌓인다. z-index가 0인 것과 같다.

숫자 : 숫자가 낮은 요소가 밑으로 간다.
- 음수가 들어가면, 부모 요소보다 밑으로 간다. 조상 요소 밑으로 보낼 수는 없다.
- 양수가 들어가면, 부모 요소보다 위로 간다.

<HTML>
<HEAD>
<STYLE type="text/css">
.top {z-index : 3; position: absolute; left: 10px; top: 50px ; border: 1px black solid; width: 200px; height: 200px; background-color: white;}
.middle {z-index: 2; position: absolute; left: 100px; top: 110px ; border: 2px black thin; width:260px; height: 200px; background-color: yellow;}
.bottom {z-index: 1; position: absolute; left: 40px; top: 190px ; border: 1px black thick; width: 200px; height: 200px; background-color: red;}
</STYLE>
</HEAD>
<BODY>
<DIV class=top>Top</DIV>
<DIV class=middle>Middle</DIV>
<DIV class=bottom>Bottom</DIV>
</BODY>
</HTML>

http://support.microsoft.com/default.aspx?scid=kb;en-us;177378

공유하기 링크
'개발/JSP&HTML' Related Articles more
Comments