IE z-index Bug

CSS2.1명세에 따르면 각 박스는 3차원의 위치를 가지게 됩니다.
가로(또는 수평)와 세로(또는 수직), 그리고 Z-axis(축)입니다. 이 때, Z-axis는 CSS에서 z-index로 표현됩니다.
즉, z-index값이 높을수록 Z축의 값도 높다는 것입니다.

z-index속성에 대하여 W3C 명세서에는 아래와 같이 표기되어 있습니다.

'z-index'

Value:	auto | <integer> | inherit
Initial:	auto
Applies to:	positioned elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	as specified

z-index의 중요한 점은 position된 요소에만 적용할 수 있는것과 값으로 정수값을 가질 수 있다는 점입니다.

z-index를 다음 코드와 같이 사용할 수 있습니다.

CSS

	* { margin:0; padding:0; }
	div { padding:10px; font:12px/1.5 tahoma; color:#fff; }
	#container { position:relative; }
	#div1 { position:absolute; left:0; top:0; z-index:2; width:200px; height:200px; background:red; }
	#div2 { position:absolute; left:100px; top:100px; z-index:1; width:200px; height:200px; background:green; }

HTML

	<div id="container">
			<div id="div1">
				#div1 {
					position:absolute; <br />
					left:0;<br />
					top:0; <br />
					z-index:2; <br />
					width:200px; <br />
					height:200px; <br />
					background:red;<br />
				}
			</div>
	</div>
	<div id="div2">
		#div2 {<br />
			position:absolute;<br />
			left:100px;<br />
			top:100px;<br />
			z-index:1;<br />
			width:300px;<br />
			height:300px;<br />
			background:skyblue;<br />
		}
	</div>

그런데 위의 코드를 실행해보면 IE7이하 브라우저에서는 잘못된 결과가 나타나는것을 볼 수 있습니다.
즉, z-index값이 높음에도 불구하고 Z축의 값이 낮게 나오는 것이죠.

IE7이하의 브라우저에서는 position:relative인 요소가 position을 사용한 요소를 감싸게 되면 해당 요소의 z-index값을 0으로 만드는 것입니다.

이럴경우 두 가지의 해결방법이 있습니다.

1. position:relative인 감싸는 요소에 높은 z-index를 지정합니다.

#container { position:relative; z-index:2; }

2. Z축이 낮은 요소의 z-index값을 음의정수로 지정합니다.

#div2 { position:absolute; left:100px; top:100px; z-index:-1; width:200px; height:200px; background:green; }

참조 사이트

---

• http://www.w3.org/TR/CSS21/visuren.html#z-index
• http://www.w3.org/TR/CSS21/zindex.html