Z-Index 기초

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 59번째.

CSS에서 z-index 속성은 위치 지정 요소(static이 아닌 position 속성을 가진 요소)의 쌓임 순서를 제어합니다. 요소가 겹칠 때, z-index는 어떤 요소가 맨 위에 나타나고 어떤 요소가 뒤에 나타날지를 결정합니다. 더 높은 z-index 값을 가진 요소는 더 낮은 값을 가진 요소보다 앞에 쌓입니다.

z-index 속성을 사용하기 위한 기본 구문은 다음과 같습니다:

selector {
    position: relative; /* 또는 absolute, fixed, 또는 sticky */
    z-index: value;
}

position: relative; (또는 absolute, fixed, 또는 sticky): z-index가 효과를 발휘하려면 요소의 위치가 설정되어야 합니다.

value: 쌓기 순서를 나타내는 정수 값입니다. 값이 큰 요소가 값이 작은 요소보다 앞에 쌓입니다. 값은 양수, 음수 또는 0일 수 있습니다.

예를 들어:

.box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 2;
}

.box2 {
    position: absolute;
    top: 70px;
    left: 70px;
    z-index: 1;
}

이 예제에서 .box1과 .box2는 모두 절대 위치(absolute)로 배치되었습니다. .box1이 더 높은 z-index 값을 가지므로, 두 요소가 겹칠 때 .box1이 .box2 앞에 쌓이게 됩니다.

챌린지

쉬움

세 개의 겹치는 div(<div>) 요소가 있으며, 각각 box1, box2, box3라는 클래스를 가지고 있는 HTML 문서가 주어집니다. 여러분의 작업은 z-index 속성을 사용하여 이 요소들의 쌓임 순서(stacking order)를 제어하는 것입니다. 다음 단계를 따르세요:

box1 클래스를 가진 <div> 요소를 대상으로 하는 CSS 규칙을 작성하세요. position 속성을 absolute로, top을 0으로, left를 0으로, 그리고 z-index를 3으로 설정하세요.
box2 클래스를 가진 <div> 요소를 대상으로 하는 CSS 규칙을 작성하세요. position 속성을 absolute로, top을 20px로, left를 20px로, 그리고 z-index를 2로 설정하세요.
box3 클래스를 가진 <div> 요소를 대상으로 하는 CSS 규칙을 작성하세요. position 속성을 absolute로, top을 40px로, left를 40px로, 그리고 z-index를 1로 설정하세요.

z-index 값이 박스들의 쌓임 순서에 어떻게 영향을 미치는지 관찰하세요. box1이 가장 위에 있고 box3가 가장 아래에 있게 됩니다.

치트 시트

z-index 속성은 위치가 지정된 요소의 쌓임 순서를 제어합니다. z-index 값이 높은 요소는 낮은 요소보다 앞에 나타납니다.

기본 구문:

selector {
    position: relative; /* 또는 absolute, fixed, 또는 sticky */
    z-index: value;
}

요구 사항:

요소는 static 이외의 위치(position) 속성을 가져야 합니다.
값은 양수, 음수 또는 0이 될 수 있습니다.
높은 값은 낮은 값보다 앞에 쌓입니다.

예시:

.box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 2;
}

.box2 {
    position: absolute;
    top: 70px;
    left: 70px;
    z-index: 1;
}

직접 해보기

<html>
<head>
    <title>Z-Index Basics</title>
    <style>
        .box1 {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: lightgreen;
        }
        .box3 {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="box1">Box 1</div>
    <div class="box2">Box 2</div>
    <div class="box3">Box 3</div>
</body>
</html>