CSS의 z-index 속성을 활용하면 개발자는 여러 요소를 서로 겹쳐 쌓을 수 있습니다. z-index 값은 양수 또는 음수 모두 지정할 수 있으며, 값이 클수록 화면 앞쪽(위쪽)에 배치됩니다.
참고 − 겹치는 요소들에 z-index가 지정되어 있지 않다면, 문서에서 마지막에 작성된 요소가 가장 위에 표시됩니다. 또한 z-index는 position: absolute;, relative;, fixed;, sticky; 등 위치 속성이 설정된 요소에서만 동작한다는 점도 기억해 두세요.
그럼 z-index 속성의 예제를 살펴보겠습니다 −
예제 1
<!DOCTYPE html>
<html>
<head>
<style>
p {
background: url("https://www.tutorialspoint.com/arangodb/images/arangodb.jpg");
background-origin: content-box;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0 0 3px black;
padding: 20px;
background-origin: border-box;
}
</style>
</head>
<body>
<h2>ArangoDB</h2>
<p>ArangoDB는 개발사에서 네이티브 멀티모델 데이터베이스로 소개하고 있습니다. 이는 다른 NoSQL 데이터베이스와 차별화되는 특징입니다. ArangoDB에서는 데이터를 문서(document), 키/값(key/value) 쌍 또는 그래프(graph) 형태로 저장할 수 있습니다.
네이티브 멀티모델 데이터베이스로서 ArangoDB는 여러 데이터베이스를 따로 배포할 필요성을 없애주므로, 구성 요소 수와 유지보수 부담이 줄어듭니다. 그 결과 애플리케이션의 기술 스택 복잡도가 낮아집니다. 전반적인 기술 요구 사항을 통합하는 것뿐만 아니라, 이러한 단순화는 총 소유 비용(TCO) 절감과 유연성 향상으로도 이어집니다.</p>
</body>
</html>실행 결과
이번에는 z-index 속성의 또 다른 예제를 살펴보겠습니다 −
예제 2
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div{
margin: auto;
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
}
div:first-child {
background-color: orange;
width: 270px;
height: 120px;
z-index: -2;
}
div:last-child {
width: 250px;
height: 100px;
z-index: -1;
background-color: turquoise;
}
</style>
</head>
<body>
<div></div>
<p>변수(variable)는 값을 저장하기 위해 예약된 메모리 위치입니다. 즉, 변수를 생성하면 메모리에 일정 공간을 할당하게 됩니다.............</p>
<div></div>
</body>
</html>실행 결과
핵심 정리
위 예제 2에서 확인할 수 있듯이, 첫 번째 div에는 z-index: -2, 두 번째 div에는 z-index: -1이 지정되어 있어 각각 다른 깊이로 쌓입니다. 값이 클수록 위에, 작을수록 아래에 배치되며, 음수 값은 기본 흐름의 콘텐츠 뒤로 요소를 보낼 때 유용합니다. 이처럼 z-index를 활용하면 오버레이, 카드 스택, 드롭다운 메뉴 등 다양한 레이어 기반 UI를 손쉽게 구현할 수 있습니다.