์ง๋ ์๊ฐ ์ฐ๋ฆฌ๋ CSS์ position์์ฑ์ผ๋ก ์์๋ฅผ ์ฐ๋ฆฌ๊ฐ ์ํ๋ ๊ณณ์ ๋ฐฐ์นํ๋ ๋ฐฉ๋ฒ์ ๋ํด์ ๋ฐฐ์ ๋ค.
๊ทธ๋์ ์ฐ๋ฆฌ๋ fixed, absolute, relative, sticky๋ฑ๋ฑ์ ์์๋ณด์๊ณ , ๊ทธ ๊ฒฐ๊ณผ ์ฐ๋ฆฌ๊ฐ ์ํ๋๋๋ก HTML Elements๋ฅผ ๋ฐฐ์นํ ์ ์๊ฒ ๋์๋ค.
์ค๋์ ์ง๋ ์๊ฐ ๋ฐฐ์ ๋ Position์ ํ ๋๋ก ๋ฐฐ์น๋ฅผ ๋ง์ณค์ ๋ z-index
๋ก ์ด๋ค ์์๊ฐ ์์ผ๋ก ์ฌ์ง๋ฅผ ์ ํด๋ณด๋ ์๊ฐ์ ๊ฐ๊ฒ ๋ค.
z-index

mdn์์๋ z-index๋ฅผ ์์ ๊ฐ์ด ์ด์ผ๊ธฐ ํ๋ค.
z์ถ์ ์์๋ฅผ ์ง์ ํ๋ค.
์ด ๋ง์ด ๋ฌด์จ ๋ง์ผ๊น?

์ฐ๋ฆฌ๋ ์ผ๋ฐ์ ์ธ HTML ๋ฌธ์๋ฅผ ๋์ผ๋ก ๋ณผ ๋๋ 2D๋ก ๋ณด๊ธฐ ๋๋ฌธ์ X์ถ๊ณผ Y์ถ๋ง ์ธ์ํ ์ ์๋ค.
ํ์ง๋ง ์ด z-index ๋ฅผ ์ค์ ํ๋ฉด ์กฐ๊ธ ๋ ์ ์ฒด์ ์ผ๋ก ๋ฐฐ์นํ ์ ์๊ฒ๋๊ณ ๊ทธ ๋ง์ ์ฐ๋ฆฌ๊ฐ ๋์ผ๋ก ๋ณผ ๋ x์ถ์ ๋ฐฐ์น๋ ํ๋ฉด์ z์ถ์ ์ด์ฉํด์ ์์๋ฅผ ์ง์ ํ ์ ์๊ฒ๋๋ค๋ ์๋ฆฌ๋ค.
์ง๋ ์๊ฐ์ ๋ฐฐ์ด position์ ๋ณต์ต๊ณผ ๋๋ถ์ด ์ค์ต ํ๊ฒฝ์ ๊ตฌ์ถํด๋ณด์.
์ค์ต ํ๊ฒฝ ๊ตฌ์ถ
์ผ๋จ ๋ค์๊ณผ ๊ฐ์ด div๋ก ์ด๋ฃจ์ด์ง box๋ฅผ 3๊ฐ ๋ง๋ค์ด ๋ณด์.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css" />
<script src="./index.js"></script>
<title>Document</title>
</head>
<body>
<div class="work-stage">
<div class="work-stage__box">
<div>Box1</div>
<div>Box2</div>
<div>Box3</div>
</div>
</div>
</body>
</html>
index.css
body {
background: #cfd8dc;
display: flex;
justify-content: center;
align-items: center;
}
.work-stage {
margin-top: 100px;
width: 600px;
height: 800px;
background: white;
overflow-y: auto;
}
.work-stage__box {
width: 60%;
height: 300%;
}
.work-stage__box div {
width: 150px;
height: 150px;
border: 1px solid;
}
๊ทธ๋ฆฌ๊ณ ์ด์ ์ฌ๊ธฐ์ Position์ ์ถ๊ฐํด์ ๋ฐ์ค 3๊ฐ๋ฅผ ์ด์๊ฒ ๊ฒน์ณ๋ณด์.
๊ทธ๋ฆฌ๊ณ ๋ฐฐ๊ฒฝ์์ ์ข ์ฃผ๊ณ ๊ตฌ๋ถ์ ํ ์ ์๊ฒ ํด๋ณด์.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css" />
<script src="./index.js"></script>
<title>Document</title>
</head>
<body>
<div class="work-stage">
<div class="work-stage__box">
<div>Box1</div>
<div>Box2</div>
<div>Box3</div>
</div>
</div>
</body>
</html>
index.css
body {
background: #cfd8dc;
display: flex;
justify-content: center;
align-items: center;
}
.work-stage {
margin-top: 100px;
width: 600px;
height: 800px;
background: white;
overflow-y: auto;
}
.work-stage__box {
width: 60%;
height: 300%;
position: relative;
}
.work-stage__box div {
width: 150px;
height: 150px;
border: 1px solid;
position: absolute;
}
.work-stage__box div:first-child {
top: 20px;
left: 20px;
background: powderblue;
}
.work-stage__box div:nth-child(2) {
top: 40px;
left: 40px;
background: tomato;
}
.work-stage__box div:last-child {
top: 60px;
left: 60px;
background: wheat;
}
์ด์ ํ๊ฒฝ ๊ตฌ์ถ์ ๋๋ฌ์ผ๋ z-index์ ์ฌ์ฉ๋ฒ์ ๋ํด์ ์์๋ณด์.
z-index์ ์ฌ์ฉ๋ฒ
/* ํค์๋ ๊ฐ */
z-index: auto;
/* <integer> ๊ฐ */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* ์์ ๊ฐ์ผ๋ก ์ฐ์ ์์๋ฅผ ๋ฎ์ถ ์ ์์ */
/* ์ ์ญ ๊ฐ */
z-index: inherit;
z-index: initial;
z-index: unset;
z-index๋ 3๊ฐ์ง์ ์ํด ์ง์ ๋ ์ ์๋ค.
- ํค์๋ ๊ฐ
- ์ซ์์ธ integer ๊ฐ
- ์ ์ญ ๊ฐ
๋ณดํต ์ฐ๋ฆฌ๋ ์ซ์ ๊ฐ์ ๋ง์ด ์ฌ์ฉํ ๊ฒ์ธ๋ฐ, ์ซ์ ๊ฐ์ ํ์ฌ Stack์์ ํด๋น ์ซ์๋ฅผ ์๋ณํด์ ํฐ ์์๊ฐ ์์ผ๋ก์ค๊ฒ ๋ฐฐ์น๋ฅผ ํ๋ค.
๊ทธ๋ผ ์์์ ๊ตฌ์ถํ๋ ํ๊ฒฝ์์ 3๋ฒ์งธ ๋ฐ์ค์ธ ๋ฒ ์ด์ง์ ๋ฐ์ค๋ฅผ ๊ฐ์ฅ ๋ฐ์ผ๋ก ๋ด๋ ค๋ณด๊ณ ์ญ์์ผ๋ก ์ถ๋ ฅ์์ผ๋ณด์.

์ด์ ๋๋ ์ฝ๊ฒ ํ ์ ์์ ๊ฒ์ด๋ผ ์๊ฐ์ด ๋ ๋ค.
... ์๋ต
.work-stage__box div:first-child {
top: 20px;
left: 20px;
background: powderblue;
z-index: 3;
}
.work-stage__box div:nth-child(2) {
top: 40px;
left: 40px;
background: tomato;
z-index: 2;
}
.work-stage__box div:last-child {
top: 60px;
left: 60px;
background: wheat;
z-index: 1;
}
๋๊ธ