1. z-index
1️⃣ z-index란?
겹쳐 있는 요소들의 쌓임 순서(stacking order) 를 결정하는 CSS 속성
position 속성과 함께 사용될 때 의미가 있음- 화면에서 요소들은 평면(2D)에 배치되지만, 겹칠 때는 앞/뒤 순서(3D 축) 를 갖게 됨
z-index값이 큰 요소일수록 앞쪽, 작은 요소일수록 뒤쪽에 표시됩니다.
2️⃣ z-index가 적용되는 조건
z-index는 다음 중 하나의 position이 있을 때 유효함position | z-index 적용 가능 여부 |
static | ❌ 적용 안됨 (기본값) |
relative | ✔️ 적용됨 |
absolute | ✔️ 적용됨 |
fixed | ✔️ 적용됨 |
sticky | ✔️ 적용됨 |
static 상태에서는 z-index가 무시됨
3️⃣ 기본 사용 예
.box1 {
position: absolute;
z-index:1;
}
.box2 {
position: absolute;
z-index:10;
}➡️
box2가 box1보다 앞에 렌더링4️⃣ 숫자의 의미
- 정수(+, - 모두 가능)
z-index: auto는 기본값이며 부모의 stacking context를 따름
- 큰 숫자를 쓰면 더 앞으로 오지만, 술래잡기처럼 무조건 위로 올라가는 게 아님
5️⃣ Stacking Context(중요!)
요소는 특정 상황에서 자신만의 새로운 쌓임 맥락(stacking context) 을 만듦
다음 조건 중 하나라도 해당되면 stacking context 생성:
position+z-index값이auto가 아닌 경우
opacity < 1
transform,filter,perspective,will-change등 사용 시
isolation: isolate
flex또는grid자식에서z-index사용
새로운 stacking context 내에서는
➡️ 형제끼리만 z-index 비교 가능
➡️ 부모 바깥 요소보다 더 앞에 올 수 없음
6️⃣ 흔한 오류 예
<div class="parent">
<div class="child"></div>
</div>
<div class="other"></div>.parent {
position: relative;
z-index:1;
}
.child {
position: absolute;
z-index:9999;
}
.other {
position: relative;
z-index:10;
}➡️
child의 z-index가 9999라도 부모(parent)의 stacking context 안에 있기 때문에 other(z-index:10) 보다 앞으로 나올 수 없음7️⃣ 실습
1) absolute
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
/* 깊이 1 */
.box1 {
width: 300px;
height: 300px;
background-color: yellow;
display: inline-block;
}
/* 깊이 1 */
.box2 {
width: 300px;
height: 300px;
background-color: red;
display: inline-block;
}
/* 깊이 1 */
.box3 {
width: 300px;
height: 300px;
background-color: green;
display: inline-block;
}
/* 깊이 2 */
.box4 {
width: 300px;
height: 300px;
background-color: blue;
display: inline-block;
position: absolute;
}
/* 깊이 1 */
.box5 {
width: 300px;
height: 300px;
background-color: bisque;
display: inline-block;
}
</style>
</head>
<body>
<h1>z-index는 position이 static이 아닌애들로만 작동한다</h1>
<hr />
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>
2) z-index (1)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
/* 깊이 1 */
.box1 {
width: 300px;
height: 300px;
background-color: yellow;
display: inline-block;
}
/* 깊이 1 */
.box2 {
width: 300px;
height: 300px;
background-color: red;
display: inline-block;
}
/* 깊이 1 */
.box3 {
width: 300px;
height: 300px;
background-color: green;
display: inline-block;
}
/* 깊이 2 */
.box4 {
width: 300px;
height: 300px;
background-color: blue;
display: inline-block;
position: absolute;
z-index: 1;
}
/* 깊이 1 */
.box5 {
width: 300px;
height: 300px;
background-color: bisque;
display: inline-block;
position: relative;
z-index: 2;
}
</style>
</head>
<body>
<h1>z-index는 position이 static이 아닌애들로만 작동한다</h1>
<hr />
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>
3) z-index (2)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
/* 깊이 1 */
.box1 {
width: 300px;
height: 300px;
background-color: yellow;
display: inline-block;
}
/* 깊이 1 */
.box2 {
width: 300px;
height: 300px;
background-color: red;
display: inline-block;
}
/* 깊이 1 */
.box3 {
width: 300px;
height: 300px;
background-color: green;
display: inline-block;
}
/* 깊이 2 */
.box4 {
width: 300px;
height: 300px;
background-color: blue;
display: inline-block;
position: absolute;
z-index: 99;
}
/* 깊이 1 */
.box5 {
width: 300px;
height: 300px;
background-color: bisque;
display: inline-block;
position: relative;
z-index: 1;
}
</style>
</head>
<body>
<h1>z-index는 position이 static이 아닌애들로만 작동한다</h1>
<hr />
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>
Share article