๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
  • ์žฅ์›์ต ๊ธฐ์ˆ ๋ธ”๋กœ๊ทธ
๐Ÿ“บ Front End/- HTML,css,Javascript

[CSS] ์–ด๋–ค ์š”์†Œ๊ฐ€ ์•ž์œผ๋กœ ๋‚˜์˜ฌ์ง€ z-index ๋กœ ์ˆ˜์ง ์œ„์น˜๋ฅผ ์ •ํ•ด๋ณด์ž.

by Wonit 2020. 10. 16.

์ง€๋‚œ ์‹œ๊ฐ„ ์šฐ๋ฆฌ๋Š” CSS์˜ position์†์„ฑ์œผ๋กœ ์š”์†Œ๋ฅผ ์šฐ๋ฆฌ๊ฐ€ ์›ํ•˜๋Š” ๊ณณ์— ๋ฐฐ์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ๋ฐฐ์› ๋‹ค.

 

๊ทธ๋ž˜์„œ ์šฐ๋ฆฌ๋Š” fixed, absolute, relative, sticky๋“ฑ๋“ฑ์„ ์•Œ์•„๋ณด์•˜๊ณ , ๊ทธ ๊ฒฐ๊ณผ ์šฐ๋ฆฌ๊ฐ€ ์›ํ•˜๋Š”๋Œ€๋กœ HTML Elements๋ฅผ ๋ฐฐ์น˜ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค.

 

์˜ค๋Š˜์€ ์ง€๋‚œ ์‹œ๊ฐ„ ๋ฐฐ์› ๋˜ Position์„ ํ† ๋Œ€๋กœ ๋ฐฐ์น˜๋ฅผ ๋งˆ์ณค์„ ๋•Œ z-index๋กœ ์–ด๋–ค ์š”์†Œ๊ฐ€ ์•ž์œผ๋กœ ์˜ฌ์ง€๋ฅผ ์ •ํ•ด๋ณด๋Š” ์‹œ๊ฐ„์„ ๊ฐ–๊ฒ ๋‹ค.

z-index

mdn

mdn์—์„œ๋Š” z-index๋ฅผ ์œ„์™€ ๊ฐ™์ด ์ด์•ผ๊ธฐ ํ•œ๋‹ค.

 

z์ถ•์˜ ์ˆœ์„œ๋ฅผ ์ง€์ •ํ•œ๋‹ค.

 

์ด ๋ง์ด ๋ฌด์Šจ ๋ง์ผ๊นŒ?

3 dimension

์šฐ๋ฆฌ๋Š” ์ผ๋ฐ˜์ ์ธ 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๊ฐ€์ง€์— ์˜ํ•ด ์ง€์ •๋  ์ˆ˜ ์žˆ๋‹ค.

  1. ํ‚ค์›Œ๋“œ ๊ฐ’
  2. ์ˆซ์ž์ธ integer ๊ฐ’
  3. ์ „์—ญ ๊ฐ’

๋ณดํ†ต ์šฐ๋ฆฌ๋Š” ์ˆซ์ž ๊ฐ’์„ ๋งŽ์ด ์‚ฌ์šฉํ•  ๊ฒƒ์ธ๋ฐ, ์ˆซ์ž ๊ฐ’์€ ํ˜„์žฌ 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;
}

๋Œ“๊ธ€