๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ“บ Front End/-- HTML & CSS

[CSS] ์š”์†Œ๋ฅผ ์›ํ•˜๋Š” ๊ณณ์— ๋ฐฐ์น˜ํ•˜๊ธฐ position ์†์„ฑ :: static, relative, absolute, fixed, sticky

by Wonit 2020. 10. 15.

CSS์—์„œ HTML Elements๋ฅผ ๋‚ด๊ฐ€ ์›ํ•˜๋Š” ๊ณณ์— ๋ฐฐ์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์—๋Š” ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ฐฉ๋ฒ•๋“ค์ด ์กด์žฌํ•œ๋‹ค.

 

display ์†์„ฑ์œผ๋กœ ์˜์—ญ์„ ๋‚˜๋ˆ ์„œ ๋ฐฐ์น˜๋ฅผ ํ•  ์ˆ˜๋„ ์žˆ๊ณ , box-sizing๊ณผ ๊ฐ™์€ ๋ฐฉ๋ฒ•์œผ๋กœ ๋ฐฐ์น˜๋ฅผ ํ•  ์ˆ˜๋„ ์žˆ๋‹ค.

 

ํ•˜์ง€๋งŒ ์ด๋Ÿฌํ•œ ๋ฐฉ๋ฒ•๋“ค์—๋Š” ๋งŽ์€ ์ œ์•ฝ์‚ฌํ•ญ๋“ค์ด ์กด์žฌํ•˜๋ฉฐ, ์šฐ๋ฆฌ๊ฐ€ ์›ํ•˜๋Š” ๋Œ€๋กœ ๋™์ž‘์‹œํ‚ค๊ธฐ ์œ„ํ•ด์„œ๋Š” Css์˜ ๋ถ€๋ชจ, ์ž์‹๊ฐ„์˜ ๊ด€๊ณ„๋ฅผ ํŒŒ์•…ํ•ด์ค˜์•ผ ํ•œ๋‹ค.

 

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

์‚ฌ์ „ ์ค€๋น„

๋ณธ๊ฒฉ์ ์ธ ์ด์•ผ๊ธฐ์— ์•ž์„œ ์šฐ๋ฆฌ๋Š” ์ด๋ฒˆ ์‹œ๊ฐ„์— ์Šคํฌ๋กค์ด ์žˆ๋Š” ์˜์—ญ์ด ํ•„์š”ํ•˜๋ฏ€๋กœ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํ™”๋ฉด์„ ๋จผ์ € ๊ตฌ์„ฑํ•ด ๋†“๊ณ  ์‹ค์Šต์„ ์ง„ํ–‰ํ•  ๊ฒƒ์ด๋‹ค.

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>
    </div>
  </body>
</html>

index.css

body {
  background: #cfd8dc;
  display: flex;
  justify-content: center;
  align-items: center;
}

.work-stage {
  display: block;
  margin-top: 100px;
  width: 600px;
  height: 800px;
  background: white;
  overflow: auto;
}

.work-stage__box {
  height: 3000px;
}

position

position ์—๋Š” 5๊ฐ€์ง€์˜ ์†์„ฑ์ด ์กด์žฌํ•œ๋‹ค.

  1. static
  2. relative
  3. absolute
  4. fixed
  5. sticky

๋˜ํ•œ ์ด๋Ÿฐ ์†์„ฑ๋“ค๊ณผ ํ•จ๊ป˜ ์กด์žฌํ•˜๋Š” ์†์„ฑ๋“ค์ด ์žˆ๋‹ค.

  • top, right, bottom, left
    position ์†์„ฑ์„ ์ง€์ •ํ•˜๊ณ  top, right, bottom, left ๊ฐ’์„ ์ค˜์„œ ๋ฐฐ์น˜ํ•œ๋‹ค.

์‚ฌ์šฉ ๋ฐฉ๋ฒ•

position ์†์„ฑ์€ ๋‹ค๋ฅธ css ์†์„ฑ๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ

// position
position: (static | relative | absolute | sticky | fixed)

// Offset
- top: value(px | % | rem | em | ...)
- right: value(px | % | rem | em | ...)
- bottom: value(px | % | rem | em | ...)
- left: value(px | % | rem | em | ...)

๊ณผ ๊ฐ™์ด ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

 

์ด์ œ ์œ„์˜ 5๊ฐ€์ง€ ์†์„ฑ์„ ์•Œ์•„๋ณด์ž.

static

static ์†์„ฑ์€ ์š”์†Œ๋ฅผ ์ผ๋ฐ˜์ ์ธ ํ๋ฆ„์— ๋”ฐ๋ผ ๋ฐฐ์น˜ํ•œ๋‹ค.


css์˜ ํƒœ๊ทธ๋“ค์ด ๊ธฐ๋ณธ์ ์œผ๋กœ ๊ฐ–๊ณ ์žˆ๋Š” ๊ฐ’ (default)์œผ๋กœ, ์šฐ๋ฆฌ๊ฐ€ ๋ช…์‹œ์ ์œผ๋กœ position์„ ์ง€์ •ํ•˜์ง€ ์•Š์œผ๋ฉด ๊ฐ–๊ฒŒ๋˜๋Š” ๊ฐ’์ด๋‹ค.

์œ„์™€ ๊ฐ™์ด html์˜ div ํƒœ๊ทธ๋ฅผ ์ •์˜ํ•œ ์ˆœ์„œ๋Œ€๋กœ ๋ฐฐ์น˜๊ฐ€ ๋˜์–ด์žˆ๊ณ , position์„ ๋ช…์‹œํ•˜์ง€ ์•Š์•„๋„ ์ ์šฉ๋œ๋‹ค.

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">
        <h1>diaplay: Static</h1>
        <div>box1</div>
        <div>box2</div>
        <div>box3</div>
        <div>box4</div>
        <div>box5</div>
        <div>box6</div>
        <div>box7</div>
        <div>box8</div>
        <div>box9</div>
        <div>box10</div>
      </div>
    </div>
  </body>
</html>

index.css

body {
  background: #cfd8dc;
  display: flex;
  justify-content: center;
  align-items: center;
}

.work-stage {
  display: block;
  margin-top: 100px;
  width: 600px;
  height: 800px;
  background: white;
  overflow: auto;
}

.work-stage__box {
  height: 3000px;
}

.work-stage__box div {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 5px;
  border: 1px solid;
  // position: static;

}

relative

position: relative๋Š” static๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์ •์˜ํ•œ ํ๋ฆ„๋Œ€๋กœ ๋ฐฐ์น˜๊ฐ€ ๋œ๋‹ค.


ํ•˜์ง€๋งŒ ์šฐ๋ฆฌ๊ฐ€ ํ๋ฆ„๋Œ€๋กœ ๋ฐฐ์น˜๊ฐ€ ๋˜์ง€๋งŒ ์กฐ๊ธˆ์˜ ์œ„์น˜๋ฅผ ๋งˆ์Œ๋Œ€๋กœ ๋ณ€๊ฒฝํ•˜๊ณ  ์‹ถ์„ ๋•Œ Top, Left, Right, Bottom์˜ ์˜คํ”„์…‹์„ ์ ์šฉํ•ด์„œ ์šฐ๋ฆฌ๊ฐ€ ์›ํ•˜๋Š” ๊ณณ์œผ๋กœ ๋ฐฐ์น˜ํ•œ๋‹ค.

์˜ค๋ฅธ์ชฝ์€ position: relative์ด๊ณ  ์™ผ์ชฝ์€ position: static์ด๋‹ค.

 

์šฐ๋ฆฌ๊ฐ€ 1๋ฒˆ ๋ฐ•์Šค์™€ 3๋ฒˆ ๋ฐ•์Šค์˜ ์˜คํ”„์…‹์„ top: 30px๋ผ๊ณ  ์ง€์ •ํ•˜๋ฉด ์›๋ž˜ ์œ„์น˜๋ถ€ํ„ฐ 30px ๋–จ์–ด์ง„ ์œ„์น˜๋กœ ์ด๋™ํ•œ๋‹ค.

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">
        <h1>diaplay: Relative</h1>
        <div id="box1">box1</div>
        <div id="box2">box2</div>
        <div id="box3">box3</div>
        <div id="box4">box4</div>
      </div>
    </div>
  </body>
</html>

index.css

body {
  background: #cfd8dc;
  display: flex;
  justify-content: center;
  align-items: center;
}

.work-stage {
  display: block;
  margin-top: 100px;
  width: 600px;
  height: 800px;
  background: white;
  overflow: auto;
}

.work-stage__box {
  height: 3000px;
}

.work-stage__box div {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 5px;
  border: 1px solid;
  position: relative;
}

#box1 {
  top: 30px;
}

#box3 {
  top: 30px;
}

absolute

absolute๋Š” ์กฐ๊ธˆ ํŠน์ดํ•œ ์„ฑ์งˆ์„ ๊ฐ–๊ณ ์žˆ๋‹ค.


relative์™€ ๋น„์Šทํ•œ๋ฐ, position: static ์†์„ฑ์„ ๊ฐ€์ง€๊ณ  ์žˆ์ง€ ์•Š์€ ๋ถ€๋ชจ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์›€์ง์ธ๋‹ค.


ํ•˜์ง€๋งŒ ๋ถ€๋ชจ ์ค‘์— relative, absolute, fixed์ธ position ์†์„ฑ์„ ๊ฐ€์ง„ ํƒœ๊ทธ๊ฐ€ ์—†๋‹ค๋ฉด ๊ฐ€์žฅ ์œ„์˜ ํƒœ๊ทธ(body)๊ฐ€ ๊ธฐ์ค€์ด ๋œ๋‹ค.

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">
        <h1>diaplay: Absolute</h1>
        <div id="parent">
          <div class="box">box1</div>
          <div class="box">box2</div>
          <div class="box">box3</div>
          <div class="box">box4</div>
        </div>
      </div>
    </div>
  </body>
</html>

index.css

body {
  background: #cfd8dc;
  display: flex;
  justify-content: center;
  align-items: center;
}

.work-stage {
  display: block;
  margin-top: 100px;
  width: 600px;
  height: 800px;
  background: white;
  overflow: auto;
}

.work-stage__box {
  height: 3000px;
}

.work-stage__box div {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 5px;
  border: 1px solid;
  position: absolute;
}

#parent {
  width: 300px;
  height: 300px;
  position: relative;
}

.box:first-child {
  top: 20px;
  left: 20px;
}

.box:nth-child(2) {
  top: 40px;
  left: 40px;
}

.box:nth-child(3) {
  top: 60px;
  left: 60px;
}

.box:last-child {
  top: 80px;
  left: 80px;
}

fixed

fixed ์†์„ฑ์€ ์ •๋ง ์žฌ๋ฐŒ๋Š” ์†์„ฑ์ด๋‹ค.

 

์šฐ๋ฆฌ๊ฐ€ ๋งŒ์•ฝ ์–ด๋–ค ํŽ˜์ด์ง€๋ฅผ ๊ฐ”์„ ๋•Œ ์ƒ๋‹จ Navigation๋ฐ”๊ฐ€ ์Šคํฌ๋กค์„ ๋‚ด๋ ค๋„ ๊ณ ์ •๋˜์—ˆ๋˜ ๊ฒฝํ—˜์„ ํ•œ ์ ์ด ์žˆ๋‹ค๋ฉด ๊ทธ ๊ฒƒ์€position: fixed๋ฅผ ์‚ฌ์šฉํ•œ ๊ฒƒ์ด๋‹ค.

 

ํ•˜์ง€๋งŒ ํŽ˜์ด์ง€์˜ ๋กœ๋”ฉ์ด ๋Š๋ ค์งˆ ์ˆ˜ ์žˆ๋‹ค๋Š” ํŠน์ง•์ด ์žˆ๋‹ค.

 

๋งŒ์•ฝ Navigation๋ฐ”๋ฅผ ๊ตฌํ˜„ํ–ˆ์ง€๋งŒ display๋ฅผ static์ด๋‚˜ ๋‹ค๋ฅธ ๊ฒƒ๋“ค๋กœ ํ•œ๋‹ค๋ฉด

์‚ฌ์ง„๊ณผ ๊ฐ™์ด ์Šคํฌ๋กค ๋ฐ”๊ฐ€ ๋‚ด๋ ค๊ฐ€๋ฉด Navigation ๋ฐ”๊ฐ€ ์‚ฌ๋ผ์ง„๋‹ค.

 

ํ•˜์ง€๋งŒ position: fixed๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ์Šคํฌ๋กค์„ ์ด๋™ํ•ด๋„ ์ฐฝ์ด ๊ณ ์ •๋œ๋‹ค.

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">
        <h1>diaplay: Fixed</h1>
        <div id="nav">
          <a href="#">Home</a>
          <a href="#">Login</a>
          <a href="#">Join</a>
        </div>
      </div>
    </div>
  </body>
</html>

index.css

body {
  background: #cfd8dc;
  display: flex;
  justify-content: center;
  align-items: center;
}

.work-stage {
  display: block;
  margin-top: 100px;
  width: 600px;
  height: 800px;
  background: white;
  overflow-y: auto;
}

.work-stage__box {
  width: 60%;
  height: 300%;
  position: static;
}

#nav {
  width: 45%;
  height: 50px;
  margin: 5px;
  border: 1px solid;
  position: absolute;
}

ํ•˜์ง€๋งŒ ์ด fixed ์†์„ฑ์—๋Š” ์ฃผ์˜ํ•ด์•ผํ•  ์ ์ด ํ•˜๋‚˜ ์žˆ๋‹ค.

 

Fixed ์†์„ฑ์€ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๋™์ž‘ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํŠน์ • ์œ„์น˜์˜ ๊ณ ์ •์„ ์›ํ•  ๋•Œ๋Š” ์•„๋ž˜์˜ sticky ์†์„ฑ์„ ์ด์šฉํ•˜๋Š” ๊ฒƒ์ด ๋ฐ”๋žŒ์ง ํ•˜๋‹ค.

sticky

sticky ์†์„ฑ์€ ํ‰์†Œ์—๋Š” position: static ํ˜•์‹์„ ๋„๊ณ  ์žˆ์ง€๋งŒ ์Šคํฌ๋กค ์œ„์น˜๊ฐ€ ์–ด๋–ค ์ž„๊ณ„์ ์— ์ด๋ฅด๋ฉด position: fixed์™€ ๊ฐ™์ด ํ™”๋ฉด์— ๋ฐ•์Šค๋ฅผ ๊ณ ์ • ํ•  ์ˆ˜ ์žˆ๋‹ค.

 

์ด๋ฆ„ ๊ทธ๋Œ€๋กœ ์Šคํฌ๋กค์ด ์–ด๋Š ์ง€์ ๊นŒ์ง€ ๋‚ด๋ ค๊ฐ€๋ฉด ๋ˆ๋ˆ์ด์ฒ˜๋Ÿผ ๋ถ™๊ฒŒ ๋˜๋Š” ์†์„ฑ์ด๋‹ค.

์ด๋Ÿฐ sticky ์†์„ฑ์—๋Š” top, right, bottom, left์™€ ๊ฐ™์€ ์˜คํ”„์…‹ ์†์„ฑ์„ ๊ผญ ์„ค์ •ํ•ด์•ผ ํ•œ๋‹ค.


๋งŒ์•ฝ ์„ค์ •ํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด ์ œ๋Œ€๋กœ ๋™์ž‘ํ•˜์ง€ ์•Š๊ฒŒ๋œ๋‹ค.

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">
        <h1>diaplay: Sticky</h1>
        <div id="nav">
          <a href="#">๊ณ ๊ฐ ์„ผํ„ฐ ์—ฐ๊ฒฐ</a>
        </div>
        <div>์•ˆ๋…•ํ•˜์„ธ์š”</div>
        <div class="content">Box</div>
        <div class="content">Box</div>
        <div class="content">Box</div>
        <div class="content">Box</div>
        <div class="content">Box</div>
        <div class="content">Box</div>
        <div class="content">Box</div>
        <div class="content">Box</div>
        <div class="content">Box</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: static;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.content {
  font-size: 50px;
  color: coral;
  margin: 20px;
}

#nav {
  width: 45%;
  top: 10px;
  margin-left: auto;
  border: 1px solid;
  position: sticky;
}

๋Œ“๊ธ€