z-index 속성

z-index 속성은 여러 요소가 서로 겹칠 경우 어느 요소가 위에 표시될지 결정합니다.

문법

셀렉터 {
	z-index: 숫자 | auto;
}

숫자는 정수여야 하며, 양수 또는 음수일 수 있습니다. 0도 가능합니다.

값

값	설명
숫자	정수는 요소의 중첩 순서를 지정합니다: 요소들이 서로 겹칠 때 `z-index` 값이 더 큰 요소가 위에 나타납니다.
`auto`	중첩 순서가 자동으로 구성됩니다: HTML 코드에서 더 아래에 위치한 요소가 위에 표시됩니다.

기본값: auto.

예시

이 예시에서 블록들은 HTML 코드에서의 순서대로 서로 겹치게 됩니다(z-index가 지정되지 않아 기본값인 auto를 가집니다). 첫 번째 블록이 가장 아래에(빨간색), 마지막 블록이 가장 위에(초록색) 위치합니다:

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

#div1 {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 50px;
	height: 50px;
	background: red;
}
#div2 {
	position: absolute;
	top: 60px;
	left: 60px;
	width: 50px;
	height: 50px;
	background: blue;
}
#div3 {
	position: absolute;
	top: 90px;
	left: 90px;
	width: 50px;
	height: 50px;
	background: green;
}

예시

z-index를 지정하여 중첩 순서를 변경해 보겠습니다. 빨간 블록에 3, 파란 블록에 2, 초록 블록에 1을 지정합니다. 중첩 순서가 반대로 바뀝니다(z-index 값이 3인 블록이 가장 위에 위치합니다):

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

#div1 {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 50px;
	height: 50px;
	background: red;
	z-index: 3;
}
#div2 {
	position: absolute;
	top: 60px;
	left: 60px;
	width: 50px;
	height: 50px;
	background: blue;
	z-index: 2;
}
#div3 {
	position: absolute;
	top: 90px;
	left: 90px;
	width: 50px;
	height: 50px;
	background: green;
	z-index: 1;
}