코딩스쿨

CSS Z-index

CSS Z-index: 요소의 쌓임 순서 제어하는 방법

CSS Z-index는 요소가 겹쳐지는 상황에서 쌓임 순서를 제어하는 속성입니다. 이 속성은 요소가 다른 요소 위에 나타날지, 아래에 나타날지를 결정하는 데 사용됩니다. z-index 값이 높을수록 해당 요소는 더 앞에 나타나고, 값이 낮을수록 뒤로 밀려납니다. 이 자료에서는 Z-index를 사용하여 요소의 레이어 순서를 제어하는 방법을 다룹니다.

1. Z-index 속성 개요

z-index 속성은 Position 속성과 함께 사용되며, 요소들이 쌓이는 순서를 제어합니다. 특히, 절대 위치(absolute), 고정 위치(fixed), 상대 위치(relative) 또는 플렉스, 그리드 컨테이너와 같은 요소에 사용됩니다. 정적(static) 위치인 요소에는 **z-index**가 적용되지 않습니다.

기본 구문:

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

value: 요소의 쌓임 순서를 나타내는 정수 값입니다. 양수일수록 앞에 표시되고, 음수일수록 뒤에 배치됩니다.

2. 기본 Z-index 동작

z-index 값은 정수로 설정되며, 값이 클수록 해당 요소는 다른 요소들 위에 배치됩니다. 기본 값은 auto로, 0과 동일한 효과를 가집니다. z-index: auto 또는 값이 지정되지 않은 요소는 기본 순서에 따라 배치됩니다.

기본 예시:

.box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    background-color: #FF5722;
    z-index: 1; /* 낮은 z-index 값 */
}

.box2 {
    position: absolute;
    top: 80px;
    left: 80px;
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    z-index: 2; /* 높은 z-index 값으로 앞에 표시 */
}

위 코드는 box2 요소가 box1 요소보다 앞에 표시되도록 설정합니다. z-index 값이 높을수록 해당 요소는 앞쪽 레이어로 이동하며, 값이 낮으면 뒤쪽에 배치됩니다.

3. Position 속성과 함께 사용

*z-index*는 Position 속성과 함께 사용해야 합니다. Position 속성이 absolute, relative, fixed 또는 **sticky*로 설정되어 있을 때만 **z-index*가 적용됩니다. position: static 요소에는 **z-index*가 적용되지 않으므로, 반드시 위치 속성을 지정해야 합니다.

예시:

.container {
    position: relative;
    width: 300px;
    height: 200px;
    background-color: #f2f2f2;
}

.absolute-box {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 3; /* 컨테이너 안에서 가장 앞에 표시 */
    background-color: #2196F3;
    color: white;
    padding: 10px;
}

위 코드는 absolute 위치를 가진 요소가 z-index 값에 따라 부모 컨테이너 안에서 가장 앞에 표시되도록 설정합니다. **position: relative**나 **position: absolute**가 없는 경우 **z-index**는 효과를 발휘하지 않습니다.

4. Z-index와 쌓임 맥락(Stacking Context)

*z-index*는 **쌓임 맥락(stacking context)**이라는 개념과 밀접하게 관련이 있습니다. 쌓임 맥락은 특정 요소가 새로운 레이어 그룹을 형성하는 것을 의미합니다. z-index 값이 설정된 요소는 부모 요소의 쌓임 맥락 내에서만 영향을 미칩니다.

새로운 쌓임 맥락을 형성하는 경우:

position 속성이 absolute, relative, fixed, **sticky*로 설정되고 **z-index*가 명시된 경우
*opacity*가 1보다 작은 경우
transform, filter, perspective 등의 속성이 적용된 경우

쌓임 맥락 예시:

.container {
    position: relative;
    z-index: 1;
    background-color: #f0f0f0;
    padding: 20px;
}

.inner-box {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    background-color: #FF5722;
    padding: 10px;
}

.outer-box {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 3; /* 새로운 쌓임 맥락 내에서만 적용됨 */
    background-color: #4CAF50;
    padding: 10px;
}

위 예시에서 **outer-box**는 container 요소에 쌓임 맥락을 형성하고, 그 안의 요소들 간의 순서에만 영향을 미칩니다. 따라서 다른 부모 요소의 쌓임 맥락과는 독립적으로 동작하게 됩니다.

5. Z-index와 음수 값

*z-index*는 음수 값도 허용됩니다. 음수 값을 사용하면 해당 요소를 다른 요소의 뒤쪽에 배치할 수 있습니다. 이는 특히 배경 요소를 배치할 때 유용합니다.

음수 값 예시:

.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #333;
    z-index: -1; /* 가장 뒤로 배치 */
}

.foreground {
    position: relative;
    z-index: 1;
    background-color: #FFEB3B;
    padding: 20px;
}

위 코드는 **배경 요소(background)**를 음수 z-index 값으로 설정하여 모든 요소 뒤에 배치하고, **foreground**는 z-index 값이 1이므로 앞쪽에 표시됩니다.

6. Z-index와 Flexbox, Grid

Flexbox와 Grid 레이아웃에서도 **z-index**를 사용하여 요소의 쌓임 순서를 제어할 수 있습니다. 플렉스 아이템 또는 그리드 아이템에 대해 쌓임 순서를 설정할 때 Position 속성을 사용하여 개별 요소의 레이어를 제어할 수 있습니다.

Flexbox와 Z-index 예시:

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 200px;
    background-color: #ddd;
}

.flex-item {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #FF5722;
    z-index: 1;
}

.flex-item-2 {
    position: relative;
    width: 120px;
    height: 120px;
    background-color: #4CAF50;
    z-index: 2; /* 더 높은 z-index로 앞에 배치 */
}

위 코드는 플렉스 컨테이너 내에서 플렉스 아이템의 쌓임 순서를 설정한 예시입니다. **flex-item-2**는 더 높은 z-index 값으로 앞쪽에 표시됩니다.

Grid와 Z-index 예시:

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
}

.grid-item {
    position: relative;
    z-index: 1;
    background-color: #FFEB3B;
}

.grid-item-2 {
    position: relative;
    z-index: 2;
    background-color: #2196F3;
}

위 코드는 그리드 아이템에서 z-index 값을 사용해 요소

6. Z-index와 Flexbox, Grid (계속)

위 코드에서 그리드 아이템에 대해 **z-index**를 사용하면 그리드 레이아웃 내에서 요소의 쌓임 순서를 설정할 수 있습니다. **grid-item-2**는 더 높은 z-index 값을 가지므로 앞쪽에 표시되며, **grid-item**은 그 뒤에 배치됩니다.

7. Z-index와 부모-자식 관계

Z-index는 부모-자식 요소 간의 관계에서 중요한 역할을 합니다. 부모 요소가 새로운 쌓임 맥락을 형성하는 경우, 자식 요소는 해당 쌓임 맥락 내에서만 **z-index**가 적용됩니다. 즉, 자식 요소의 z-index 값이 아무리 커도 부모 요소의 레이어를 넘어서 바깥 요소와 겹칠 수 없습니다.

부모-자식 관계 예시:

.parent {
    position: relative;
    z-index: 1;
    background-color: #FFEB3B;
    padding: 20px;
}

.child {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background-color: #4CAF50;
    padding: 10px;
}

.sibling {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 3;
    background-color: #2196F3;
    padding: 10px;
}

위 코드는 parent 요소가 쌓임 맥락을 형성하고, **child**는 부모 요소 내에서만 앞쪽에 배치됩니다. 하지만 부모 요소의 z-index 값이 1이므로, 부모의 형제 요소인 **sibling**은 부모 요소 전체보다 앞쪽에 배치됩니다. 이는 자식 요소가 부모의 쌓임 맥락을 넘지 못한다는 것을 의미합니다.

8. Z-index와 투명도 (Opacity)

z-index는 투명도(opacity 속성)와 함께 사용될 때 예상치 못한 레이어 순서가 발생할 수 있습니다. opacity 값이 1보다 작으면 해당 요소는 새로운 쌓임 맥락을 형성하게 됩니다. 따라서 **opacity**가 적용된 요소는 다른 요소의 z-index와 상관없이 자신의 쌓임 맥락 내에서만 영향을 받습니다.

투명도와 Z-index 예시:

.box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 150px;
    height: 150px;
    background-color: #FF5722;
    z-index: 2;
}

.box2 {
    position: absolute;
    top: 100px;
    left: 100px;
    width: 150px;
    height: 150px;
    background-color: #4CAF50;
    opacity: 0.5; /* 투명도가 0.5로 설정됨 */
    z-index: 3; /* 하지만 쌓임 맥락은 따로 형성됨 */
}

위 코드는 **box2**가 더 높은 z-index 값을 가지지만, **투명도(opacity)**가 적용되면서 새로운 쌓임 맥락이 형성되어 box1 뒤에 보일 수 있습니다. 이는 투명도가 적용된 요소가 기존의 쌓임 순서와는 다르게 동작하는 예시입니다.

9. Z-index와 transform, filter, perspective 속성

transform, filter, perspective 속성은 새로운 쌓임 맥락을 생성하는 또 다른 속성들입니다. 이 속성들이 적용된 요소는 다른 요소의 z-index 값과 상관없이 자신의 쌓임 맥락 내에서만 영향을 받습니다.

Transform과 Z-index 예시:

.container {
    position: relative;
    z-index: 1;
    width: 300px;
    height: 300px;
    background-color: #FFEB3B;
}

.transformed-box {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 150px;
    height: 150px;
    background-color: #4CAF50;
    transform: rotate(45deg); /* 회전하면서 새로운 쌓임 맥락을 형성 */
    z-index: 3;
}

위 코드는 **transform**이 적용된 요소가 새로운 쌓임 맥락을 형성하는 예시입니다. 회전된 상자는 기존의 부모 요소와 관계없이 자신의 맥락 내에서만 쌓임 순서가 적용됩니다.

10. Z-index 관련 문제 해결 팁

Z-index는 때때로 예상치 못한 문제를 일으킬 수 있습니다. 특히 새로운 쌓임 맥락이 생성될 때 의도하지 않은 순서로 요소가 배치될 수 있습니다. 이를 해결하기 위한 몇 가지 팁을 소개합니다.

팁 1: 항상 `position` 속성을 확인

*z-index*가 예상대로 작동하지 않으면 position 속성을 확인해야 합니다. 정적(static) 위치인 요소에는 **z-index*가 적용되지 않으므로, relative, absolute, fixed 중 하나로 설정해야 합니다.

팁 2: 새로운 쌓임 맥락 확인

z-index 값이 예상과 다르게 작동할 경우, 새로운 쌓임 맥락이 생성되었는지 확인하세요. opacity, transform, filter 등의 속성이 적용된 요소는 자체적인 쌓임 맥락을 만들 수 있습니다.

팁 3: `z-index` 값의 범위 설정

*z-index*는 양수, 음수 모두 허용되지만, 너무 큰 값을 사용할 경우 관리하기 어려워질 수 있습니다. 일반적으로 작은 값으로 시작하여 레이아웃의 쌓임 순서를 정리하는 것이 좋습니다.

팁 4: 쌓임 맥락을 명시적으로 설정

때로는 명시적으로 쌓임 맥락을 설정하여 의도한 순서로 레이어를 배치하는 것이 좋습니다. **부모 요소에 z-index**를 지정하여 쌓임 맥락을 명확히 정의하는 것이 도움이 됩니다.

CSS Z-index 속성은 웹 페이지에서 요소의 쌓임 순서를 제어하는 중요한 도구입니다. z-index 값은 Position 속성과 함께 사용되어 요소가 앞뒤로 쌓이는 순서를 결정하며, 새로운 쌓임 맥락을 형성하는 속성과의 조합을 통해 정밀한 레이어 제어를 가능하게 합니다.

Z-index는 특히 팝업 창, 고정된 헤더, 툴팁, 모달 창 등 UI 요소에서 자주 사용되며, 레이어드 디자인을 구현할 때 필수적입니다. 부모-자식 관계에서의 쌓임 맥락과 특정 속성에 의한 맥락 형성을 이해하면, 더욱 직관적이고 유연한 레이아웃 제어가 가능합니다.

따라서 **z-index**와 쌓임 맥락의 개념을 잘 이해하고 활용하는 것이 웹 개발과 디자인에서 매우 중요하며, 복잡한 레이아웃에서도 예상한 대로 요소들이 쌓이고 표시되도록 도울 수 있습니다.

코딩 스쿨 CSS