2.1 z-index 속성
겹침 컨텍스트는 CSS에서 z-index 속성을 사용하여 관리되며, Z축(화면에 수직인 세 번째 좌표)에서 요소들이 어떻게 겹쳐지는지를 결정해. z-index와 겹침 컨텍스트를 이해하고 적절히 사용하는 것은 겹치는 요소들이 있는 복잡하고 동적인 레이아웃을 만드는 데 도움을 줘.
겹침 컨텍스트의 기본
겹침 컨텍스트는 요소들이 서로 위에 어떻게 표시되는지를 결정해. 웹 페이지의 각 요소는 레이어 레벨을 가지고 있고, 이 레벨은 z-index 속성을 통해 변경할 수 있어.
겹침 규칙
- 문서 트리에서의 위치: 문서 트리에서 아래에 있는 요소가 위에 있는 요소 위로 겹쳐져.
z-index속성: 더 큰z-index값을 가진 요소가 더 작은z-index값을 가진 요소 위로 겹쳐져.
z-index의 기본
z-index 속성은 요소들이 서로 겹쳤을 때의 겹침 순서를 정해 줘. 더 큰 z-index 값을 가진 요소는 더 작은 값을 가진 요소 위에 표시돼. z-index는 위치 지정(position: relative, absolute, fixed 또는 sticky)된 요소에 대해서만 적용돼.
문법:
.element {
position: relative; /* 또는 absolute, fixed, sticky */
z-index: number;
}
여기서:
-
number: 양수나 음수가 될 수 있는 정수. 값이 클수록 요소가 겹침 순서에서 더 위에 표시돼
z-index 사용 예제:
이 예제에서는 z-index: 2;를 가진 Box 2가 Box 1과 Box 3 위에 표시되고, Box 1은 Box 3 위에 표시돼.
.wrapper {
min-height: 300px;
}
.box {
position: absolute;
min-width: 125px;
min-height: 125px;
color: white;
}
.box1 {
z-index: 1;
top: 50px;
left: 50px;
background-color: red;
}
.box2 {
z-index: 2;
top: 100px;
left: 100px;
background-color: blue;
}
.box3 {
z-index: 0;
top: 150px;
left: 150px;
background-color: green;
}
<div class="wrapper">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>
2.2 겹침 컨텍스트(stacking context)
겹침 컨텍스트는 겹침 순서를 정할 때 하나의 그룹으로 취급되는 요소들이야. 겹침 컨텍스트는 특정 조건이 충족될 때, 예를 들어 위치 지정과 함께 z-index를 적용할 때나 다른 CSS 속성이 있을 때 생성돼.
겹침 컨텍스트 생성
겹침 컨텍스트는 다음의 경우에 생성돼:
- 요소에
relative,absolute,fixed, 또는sticky위치가 있고,z-index값이auto가 아님. - 요소에
opacity속성이 1보다 작은 값이 있음. - 요소에 기본값이 아닌
transform,filter,perspective,clip-path,mask또는mask-image속성이 있음. - 요소에
contain속성이layout,paint, 또는strict값을 가짐.
겹침 컨텍스트 생성 예제:
.parent {
position: relative;
z-index: 10;
min-height: 300px;
padding: 20px;
color: white;
background-color: #f1c40f;
}
.child-blue {
position: absolute;
z-index: 1;
top: 50px;
left: 50px;
min-width: 125px;
min-height: 125px;
background-color: #3498db;
}
.child-red {
position: absolute;
z-index: 2;
top: 100px;
left: 100px;
min-width: 125px;
min-height: 125px;
background-color: #e74c3c;
}
<div class="parent">
부모 요소
<div class="child-blue">1</div>
<div class="child-red">2</div>
</div>
코드 설명:
-
.parent:position: relative;와z-index: 10;을 가진 요소로, 새로운 겹침 컨텍스트를 만들어 -
.child-blue:position: absolute;와z-index: 1;을 가진 요소로, 부모 요소에 의해 생성된 새로운 겹침 컨텍스트에 위치해 -
.child-red:position: absolute;와z-index: 2;를 가진 요소로, 마찬가지로 부모 요소에 의해 생성된 새로운 겹침 컨텍스트에 위치하며,.child-blue위에 놓일 거야
2.3 겹침 컨텍스트 간의 상호작용
하나의 겹침 컨텍스트 내의 요소들은 다른 겹침 컨텍스트의 요소들 위로 겹쳐질 수 없어, 컨텍스트 자체의 순서가 변경되지 않는 한. 이는 같은 겹침 컨텍스트 내에서 더 높은 z-index를 가진 요소들이 항상 더 낮은 z-index를 가진 요소들 위에 표시된다는 걸 의미해.
겹침 컨텍스트 간의 상호작용 예제:
.wrapper {
min-height: 500px;
}
.container1 {
position: relative;
z-index: 10;
padding: 20px;
margin-bottom: 200px;
background-color: lightgrey;
}
.container2 {
position: relative;
z-index: 20;
padding: 20px;
background-color: lightpink;
}
.box {
position: absolute;
min-width: 125px;
min-height: 125px;
color: white;
}
.box1 {
z-index: 1;
top: 50px;
left: 50px;
background-color: red;
}
.box2 {
z-index: 2;
top: 100px;
left: 100px;
background-color: blue;
}
<div class="wrapper">
<div class="container1">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
</div>
<div class="container2">
<div class="box box1">Box 3</div>
<div class="box box2">Box 4</div>
</div>
</div>
이 예제에서는 z-index: 20;을 가진 .container2가 z-index: 10;을 가진 .container1 위에 표시돼. 각 컨테이너 내의 요소들은 자신의 z-index에 따라 배치되지만 다른 컨테이너의 요소들과 겹쳐지지 않아.
2.4 음수값 z-index
z-index는 음의 값도 가질 수 있어, 이는 요소를 z-index가 0이거나 양수인 다른 요소들 아래에 배치할 수 있게 해줘.
.container {
min-height: 300px;
}
.box {
position: absolute;
min-width: 125px;
min-height: 125px;
color: white;
}
.box1 {
z-index: -1;
top: 100px;
left: 100px;
background-color: #3498db;
}
.box2 {
z-index: 0;
top: 150px;
left: 150px;
background-color: #e74c3c;
}
<div class="container">
<div class="box box1">-1</div>
<div class="box box2">0</div>
</div>
코드 설명:
.box1:z-index: -1;를 가진 요소로,z-index: 0;을 가진 요소 아래에 배치될 거야
z-index 사용 팁:
- z-index 사용 최소화: 정말 필요할 때만
z-index를 사용하도록 하자. 이렇게 하면 복잡하고 혼란스러운 겹침 구조를 피할 수 있어 - 의도적으로 겹침 컨텍스트 생성: 새로운 겹침 컨텍스트를 생성하는 것은 요소의 겹침을 관리하는 데 도움을 주지만, 문서 구조를 복잡하게 만들 수 있어
- 의미 있는 z-index 값 사용:
z-index값을 의미 있게 배정하자, 예를 들어, 상위 요소에는 양수 값을, 하위 요소에는 음수 값을 사용해
GO TO FULL VERSION