HTML DOM의 스타일 zIndex 속성은 HTML 문서에서 위치가 지정된(positioned) 요소의 쌓임 순서(stacking order)를 가져오거나 수정하는 데 사용됩니다. zIndex를 활용하면 여러 요소가 겹쳐 있을 때 어떤 요소가 앞에 표시되고 어떤 요소가 뒤에 숨겨질지 결정할 수 있습니다.
문법(Syntax)
zIndex 속성의 기본 문법은 다음과 같습니다.
1. zIndex 값 가져오기
object.style.zIndex
2. zIndex 값 설정하기
object.style.zIndex = "value";
속성 값(Value)
zIndex 속성에 사용할 수 있는 값은 다음과 같습니다.
| 값 | 설명 |
|---|---|
| initial | 해당 속성 값을 기본(default) 값으로 설정합니다. |
| inherit | 부모 요소로부터 이 속성 값을 상속받습니다. |
| auto | 요소들이 HTML 문서에 나타나는 순서를 기준으로 쌓입니다. 별도의 z축 순서를 지정하지 않습니다. |
| number | 요소의 쌓임 순서를 지정하는 정수 값입니다. 숫자가 클수록 화면에서 앞쪽(위)에 표시됩니다. 음수도 사용할 수 있습니다. |
참고: zIndex 속성은 position 속성이 relative, absolute, fixed, sticky 중 하나로 설정된 요소에만 적용됩니다.
예제(Example)
다음은 HTML DOM 스타일 zIndex 속성을 사용하는 예제입니다. 버튼을 클릭하면 빨간 박스(box1)의 zIndex 값이 변경되어 초록 박스 위로 올라옵니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
}
.box1 {
width: 100px;
height: 100px;
background: lightcoral;
position: relative;
top: 50px;
}
.box2 {
width: 100px;
height: 100px;
background: lightgreen;
position: relative;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem 0;
}
</style>
</head>
<body>
<h1>DOM Style zIndex Property Example</h1>
<div class='box1'></div>
<div class='box2'></div>
<button onclick="add()" class="btn">Change zIndex</button>
<script>
function add() {
document.querySelector('.box1').style.zIndex = "1";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
여기서 “Change zIndex” 버튼을 클릭하면 빨간 박스와 초록 박스의 겹침 순서가 아래와 같이 변경됩니다.
버튼 클릭 시 자바스크립트의 querySelector() 메서드로 box1 요소를 선택한 뒤, style.zIndex = "1"을 통해 해당 요소의 쌓임 순서를 높였습니다. 그 결과 원래는 초록 박스 아래에 있던 빨간 박스가 초록 박스보다 앞쪽으로 이동하여 표시됩니다.