Z-index 속성

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>
이렇게 나와요

◀ ▶