stacking context
css ํฌ์ง์ ๋ ๋ฑ์ผ๋ก ์ธํ์ฌ ์์๊ฐ ๊ฒน์ณ ์ก์ ๊ฒฝ์ฐ ์์์ ์์ ์์(stacking context)๋ฅผ ์ ์ํ ์ ์๋ค.
์์ฃผ ์ฐ์ด๋ ์์ ๋งฅ๋ฝ์ ์ํฅ์ ๋ฐ๋ ์์๋ ๋ค์๊ณผ ๊ฐ๋ค.
- ๋ฌธ์์ ๋ฃจํธ ์์ (<html>)
- position์ด absolute ๋๋ relative์ด๊ณ , z-index๊ฐ auto๊ฐ ์๋ ์์
- position์ด fixed ๋๋ sticky์ธ ์์
- flexbox ์ปจํ ์ด๋์ ์์ ์ค z-index๊ฐ auto๊ฐ ์๋ ์์
- grid ์ปจํ ์ด๋์ ์์ ์ค z-index๊ฐ auto๊ฐ ์๋ ์์
- opacity๊ฐ 1๋ณด๋ค ์์ ์์
z-index ์์ฑ์ ๊ฐ
auto
์๋ก์ด ์์ ๋งฅ๋ฝ์ ์์ฑํ์ง ์๊ณ ํ์ฌ ์์ ๋งฅ๋ฝ์์์ ์์น๋ ๋ถ๋ชจ ์์์ ๋์ผํ๋ค.
์์
ํ ์์ ๋ง์ ์์ ๋งฅ๋ฝ์ ์์ฑํ๊ณ ํด๋น ๋งฅ๋ฝ์์ ์์ ์ ์์น๋ฅผ 0์ผ๋ก ์ค์ ํ๋ค.
๋์ ๊ฐ์ผ์๋ก ๋ค๋ฅธ ์์ ์์ ์์ด๊ฒ ๋๋ค.
์์๋ก ์ฒ๋ฆฌํด์ฃผ๋ฉด ์ฐ์ ์์๋ฅผ ๋ฎ์ถ ์ ์๋ค.
์์
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
width: 100px;
height: 100px;
position: absolute;
border: 2px solid #333;
text-align: center;
line-height: 100px;
font-family: Arial, sans-serif;
}
#box1 {
background-color: #ffcc00;
left: 50px;
top: 50px;
z-index: 1;
}
#box2 {
background-color: #66ccff;
left: 80px;
top: 80px;
z-index: 2;
}
#box3 {
background-color: #99ff99;
left: 110px;
top: 110px;
z-index: 3;
}
</style>
</head>
<body>
<div class="box" id="box1">1</div>
<div class="box" id="box2">2</div>
<div class="box" id="box3">3</div>
</body>
</html>
z-index ๊ฐ์ ์ด์ง ๋ณํ
#box1 {
background-color: #ffcc00;
left: 50px;
top: 50px;
z-index: 2;
}
#box2 {
background-color: #66ccff;
left: 80px;
top: 80px;
z-index: 1;
}
#box3 {
background-color: #99ff99;
left: 110px;
top: 110px;
z-index:3;
}'๐ป FE > ๐ HTML & CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [ HTML / CSS ] Margin ๊ฒน์นจ (0) | 2023.12.18 |
|---|---|
| [ HTML / CSS ] ํฌ์ง์ ๋, position (0) | 2023.12.14 |
| [ HTML / CSS ] ๊ณต์ฉํค์๋ inherit, initial, unset (0) | 2023.12.12 |
| [ HTML / CSS ] background-size ์์ฑ (auto, contain, cover) (0) | 2023.12.09 |
| [ HTML / CSS ] ์ธ๋ผ์ธ ์์ & ๋ธ๋ก ์์ (0) | 2023.12.08 |