Z-index 속성

여러 개의 element가 서로 상하로 겹치게 만들 수 있는 속성이다.

z-index: auto | 숫자

Position 속성의 값이 absolute나 relative인 element에 적용되며, 유전되지 않는다.

초기값은 auto이다.

auto: 쓴 순서대로 쌓인다. z-index가 0인 것과 같다.
숫자: 숫자가 낮은 element가 밑으로 간다.
- 음수가 들어가면, 부모 element보다 밑으로 간다. 조상 element 밑으로 보낼 수는 없다.
- 양수가 들어가면, 부모 element보다 위로 간다.

<HTML>
<HEAD>
<STYLE type="text/css">
.top {position: absolute; left: 10px; top: 50px ; z-index: 3}
.middle {position: absolute; left: 100px; top: 70px ; z-index: 2}
.bottom {position: absolute; left: 40px; top: 90px ; z-index: 1}
</STYLE>
</HEAD>
<BODY>
<img src="top.gif" class=top>
<img src="middle.gif" class=middle>
<img src="bottom.gif" class=bottom>
</BODY>
</HTML>

각각의 이미지에 따로따로 링크를 걸 수도 있다.

<A href="http://www.chosun.com" TITLE=조선일보>
<img src="top.gif" class=top border=0></A>
<A href="http://www.dongailbo.co.kr" TITLE=동아일보>
<img src="middle.gif" class=middle border=0></A>
<A href="http://www.joongang.co.kr" TITLE=중앙일보>
<img src="bottom.gif" class=bottom border=0></A>

▲ ▶