11. position 속성

Jan 07, 2026

Contents

1. position 1️⃣ position 이란?2️⃣ position 종류 5가지 3️⃣ 종류별 정리 표 4️⃣ 자주 쓰는 실전 패턴 2. position 종류별 실습 1️⃣ static 2️⃣ relative 3️⃣ absoulte 4️⃣ fixed

1. position

1️⃣ position 이란?

요소가 페이지에서 어디에 놓일지 결정하는 방식을 지정하는 속성

기본 흐름(normal flow)을 사용할지, 흐름에서 벗어나 자유롭게 배치할지의 기준이 됨

2️⃣ position 종류 5가지

1) `static` (기본값)


position: static;

기본 문서 흐름에 따라 배치

top, left 같은 좌표 지정 불가능

아무것도 지정하지 않았다면 static

✔️ 특징

움직이지 않음

가만히 두고 싶을 때 쓰는 기본 상태

2) `relative` (상대 위치)


position: relative;
top: 20px;
left: 10px;

원래 자리(static 자리) 기준으로 이동

공간은 그대로 차지 but 눈에만 이동

레이아웃은 깨지지 않음

✔️ 특징

원래 위치의 자리를 유지

미세한 이동, z-index 설정 등에 자주 사용

자식의 absolute 기준점이 되기도 함

3) `absolute` (절대 위치)


position: absolute;
top: 10px;
right: 20px;

가장 가까운 positioned 조상 요소 기준으로 배치

(position: relative, absolute, fixed, sticky 중 하나)

그런 조상이 없다면 → 문서의 최상단(body) 기준

흐름에서 제거 → 공간을 차지하지 않음

✔️ 특징

자유 배치

다른 요소 위로 겹칠 수 있음

레이아웃에서 빠져버림

💡 자주 쓰는 패턴

➡️ 부모에 position: relative; / 자식에 position: absolute;

4) `fixed` (고정 위치)


position: fixed;
bottom: 10px;
right: 10px;

뷰포트(브라우저 화면) 기준

스크롤 해도 유지

✔️ 특징

화면 구석에 떠있는 버튼(Top 버튼 등)에 딱!

흐름에서 제거됨 (absolute와 동일)

5) `sticky` (스티키, 조건부 고정) 안 배움


position: sticky;
top: 0;

처음엔 정상 흐름(static)으로 있다가

화면에서 지정 지점에 닿으면 → fixed처럼 붙음

✔️ 특징

스크롤에 따라 정교하게 움직임

헤더, 목차 UI 등에 자주 사용

3️⃣ 종류별 정리 표

속성	기준점	문서 흐름 참여
static	없음	참여 O
relative	자기 원래 위치	참여 O
absolute	가장 가까운 positioned 조상	참여 ❌
fixed	뷰포트(브라우저 화면)	참여 ❌
sticky	흐름 → 뷰포트 (조건부)	참여 O(일부)

4️⃣ 자주 쓰는 실전 패턴

1) 부모 기준 절대 배치


.parent {
	position: relative;
}
.child {
	position: absolute;
	top: 0;
	right: 0;
}

2) 스크롤 후 상단에 붙는 헤더


header {
	position: sticky;
	top: 0;
	background: white;
}

3) 화면 우하단 floating 버튼


.button {
	position: fixed;
	bottom: 16px;
	right: 16px;
}

2. position 종류별 실습

1️⃣ `static`

1) 기본

디폴트값

아래의 라인에 맞춰서 흘러감


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .box1 {
        width: 300px;
        height: 300px;
        background-color: yellow;
        display: inline-block;
      }
      .box2 {
        width: 300px;
        height: 300px;
        background-color: red;
        display: inline-block;
      }
      .box3 {
        width: 300px;
        height: 300px;
        background-color: green;
        display: inline-block;
      }
      .box4 {
        width: 300px;
        height: 300px;
        background-color: blue;
        display: inline-block;
      }
      .box5 {
        width: 300px;
        height: 300px;
        background-color: bisque;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <h1>position static, relative, absoulte, fixed</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) `vertical-align`

static은 아래 위치에 맞춰서 흘러감

박스 설계를 잘하면 사용할 일 없음

vertical-align: baseline 이 디폴트값

① vertical-align: baseline


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .box1 {
        width: 300px;
        height: 500px;
        background-color: yellow;
        display: inline-block;
      }
      .box2 {
        width: 300px;
        height: 300px;
        background-color: red;
        display: inline-block;
      }
      .box3 {
        width: 300px;
        height: 300px;
        background-color: green;
        display: inline-block;
      }
      .box4 {
        width: 300px;
        height: 300px;
        background-color: blue;
        display: inline-block;
      }
      .box5 {
        width: 300px;
        height: 300px;
        background-color: bisque;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <h1>position static, relative, absoulte, fixed</h1>
    <hr />
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
  </body>
</html>

② vertical-align: top


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .box1 {
        width: 300px;
        height: 500px;
        background-color: yellow;
        display: inline-block;
      }
      .box2 {
        width: 300px;
        height: 300px;
        vertical-align: top;
        background-color: red;
        display: inline-block;
      }
      .box3 {
        width: 300px;
        height: 300px;
        background-color: green;
        display: inline-block;
      }
      .box4 {
        width: 300px;
        height: 300px;
        background-color: blue;
        display: inline-block;
      }
      .box5 {
        width: 300px;
        height: 300px;
        background-color: bisque;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <h1>position static, relative, absoulte, fixed</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️⃣ relative

1) 기본


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .box1 {
        width: 300px;
        height: 300px;
        background-color: yellow;
        display: inline-block;
      }
      .box2 {
        width: 300px;
        height: 300px;
        background-color: red;
        display: inline-block;
        position: relative;
        top: 20px;
        left: 20px;
      }
      .box3 {
        width: 300px;
        height: 300px;
        background-color: green;
        display: inline-block;
      }
      .box4 {
        width: 300px;
        height: 300px;
        background-color: blue;
        display: inline-block;
        position: relative;
        top: 50px;
      }
      .box5 {
        width: 300px;
        height: 300px;
        background-color: bisque;
        display: inline-block;
        position: relative;
        top: 50px;
      }
    </style>
  </head>
  <body>
    <h1>position static, relative, absoulte, fixed</h1>
    <hr />
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3">
      <div class="box4"></div>
    </div>
    <div class="box5"></div>
  </body>
</html>

3️⃣ absoulte

도화지 하나 더 만드는 것

이때부터 인덱스 개념이 생김

1번 도화지 인덱스, 2번 도화지 인덱스, 3번 도화지 인덱스, 이런 식으로

자기 위치에서 앞으로 튀어나오고, 그 뒤에 있던 거는 한칸씩 당겨짐

1) 기본


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .box1 {
        width: 300px;
        height: 300px;
        background-color: yellow;
        display: inline-block;
      }
      .box2 {
        width: 300px;
        height: 300px;
        background-color: red;
        display: inline-block;
        position: absolute;
      }
      .box3 {
        width: 300px;
        height: 300px;
        background-color: green;
        display: inline-block;
      }
      .box4 {
        width: 300px;
        height: 300px;
        background-color: blue;
        display: inline-block;
      }
      .box5 {
        width: 300px;
        height: 300px;
        background-color: bisque;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <h1>position static, relative, absoulte, fixed</h1>
    <hr />
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
  </body>
</html>

➡️ 빨간 박스에 absolute를 적용 → 빨간 박스가 앞으로 튀어나오고, 초록색 박스는 원래 빨간 박스 자리로 와서 빨간 박스에 가려지고, 그 뒤의 박스들도 한칸씩 당겨짐!

2) 위치 조정


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .box1 {
        width: 300px;
        height: 300px;
        background-color: yellow;
        display: inline-block;
      }
      .box2 {
        width: 300px;
        height: 300px;
        background-color: red;
        display: inline-block;
        position: absolute;
        bottom: 20px;
      }
      .box3 {
        width: 300px;
        height: 300px;
        background-color: green;
        display: inline-block;
      }
      .box4 {
        width: 300px;
        height: 300px;
        background-color: blue;
        display: inline-block;
      }
      .box5 {
        width: 300px;
        height: 300px;
        background-color: bisque;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <h1>position static, relative, absoulte, fixed</h1>
    <hr />
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
  </body>
</html>

➡️ 빨간 박스의 위치를 완전히 고정하고 싶으면 left도 지정해줘야 함. 안해주면 노란 박스 삭제되는 순간 빨간 박스 위치도 바뀜

3) 위치 고정

상하, 좌우 모두 위치를 지정해야 위치를 완전히 고정할 수 있음


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .box1 {
        width: 300px;
        height: 300px;
        background-color: yellow;
        display: inline-block;
      }
      .box2 {
        width: 300px;
        height: 300px;
        background-color: red;
        display: inline-block;
        position: absolute;
        bottom: 20px;
        left: 310px;
      }
      .box3 {
        width: 300px;
        height: 300px;
        background-color: green;
        display: inline-block;
      }
      .box4 {
        width: 300px;
        height: 300px;
        background-color: blue;
        display: inline-block;
      }
      .box5 {
        width: 300px;
        height: 300px;
        background-color: bisque;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <h1>position static, relative, absoulte, fixed</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) absolute 후 부모 박스 안에 위치 고정 (예시 1)

박스 4(파란색) 안에 박스 5(살색)를 넣고, 박스 5를 absolute한 후 위치 조정


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .box1 {
        width: 300px;
        height: 300px;
        background-color: yellow;
        display: inline-block;
      }
      .box2 {
        width: 300px;
        height: 300px;
        background-color: red;
        display: inline-block;
      }
      .box3 {
        width: 300px;
        height: 300px;
        background-color: green;
        display: inline-block;
      }
      .box4 {
        width: 300px;
        height: 300px;
        background-color: blue;
        display: inline-block;
      }
      .box5 {
        width: 300px;
        height: 300px;
        background-color: bisque;
        display: inline-block;
        position: absolute;
        top: 50px;
        left: 50px;
      }
    </style>
  </head>
  <body>
    <h1>position static, relative, absoulte, fixed</h1>
    <hr />
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4">
      <div class="box5"></div>
    </div>
  </body>
</html>

박스4(파란색)을 박스5(살색)과 같이 움직이게 하고 싶을 때

⬇️


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .box1 {
        width: 300px;
        height: 300px;
        background-color: yellow;
        display: inline-block;
      }
      .box2 {
        width: 300px;
        height: 300px;
        background-color: red;
        display: inline-block;
      }
      .box3 {
        width: 300px;
        height: 300px;
        background-color: green;
        display: inline-block;
      }
      .box4 {
        width: 300px;
        height: 300px;
        background-color: blue;
        display: inline-block;
        position: relative;
        left: 50px;
        top: 50px;
      }
      .box5 {
        width: 200px;
        height: 200px;
        background-color: bisque;
        display: inline-block;
        position: absolute;
        top: 100px;
        left: 100px;
      }
    </style>
  </head>
  <body>
    <h1>position static, relative, absoulte, fixed</h1>
    <hr />
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4">
      <div class="box5"></div>
    </div>
  </body>
</html>

박스 4 (파란색) 안에 있는 박스 5 (살색)의 위치를 잡고 싶을 경우

➡️ 박스 4 (파란색)의 display를 grid 설정해서 박스 5의 위치를 움직이면 박스 4 안에 다른 박스가 있을 때 다른 박스의 영향을 받음

➡️ 하지만 박스 5를 absolute하면 박스 4 안에 다른 박스가 있어도 영향 받지 않고 박스 4 안에서 놀 수 있음 (⚠️ 단, 부모가 relative고, 자식이 absoulte 일 때만 가능)

4) absolute 후 부모 박스 안에 위치 고정 (예시 2)

자동차 아이콘을 input의 박스 안으로 위치를 고정하고 싶을 때


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .my_input {
        height: 100px;
      }
      .box {
        border: 1px solid black;
        padding: 5px;
        position: relative;
      }
      .new_paper {
        position: absolute;
        left: 20px;
        top: 20px;
      }

      .color_box {
        width: 100px;
        height: 100px;
        background-color: aqua;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="color_box">1</div>
    <div class="box">
      <div class="new_paper">🛻</div>
      <input class="my_input" type="text" />
    </div>
  </body>
</html>

4️⃣ fixed

1) 기본


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .box1 {
        width: 300px;
        height: 300px;
        background-color: yellow;
        display: inline-block;
      }
      .box2 {
        width: 300px;
        height: 300px;
        background-color: red;
        display: inline-block;
      }
      .box3 {
        width: 300px;
        height: 300px;
        background-color: green;
        display: inline-block;
      }
      .box4 {
        width: 300px;
        height: 300px;
        background-color: blue;
        display: inline-block;
      }
      .box5 {
        width: 300px;
        height: 300px;
        background-color: bisque;
        display: inline-block;
        position: fixed;
        right: 20px;
        top: 20px;
      }
    </style>
  </head>
  <body>
    <h1>position static, relative, absolute, fixed</h1>
    <hr />
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
  </body>
</html>

Contents

11. position 속성

1. position

1️⃣ position 이란?

2️⃣ position 종류 5가지

1) static (기본값)

2) relative (상대 위치)

3) absolute (절대 위치)

4) fixed (고정 위치)

5) sticky (스티키, 조건부 고정) 안 배움

3️⃣ 종류별 정리 표

4️⃣ 자주 쓰는 실전 패턴

1) 부모 기준 절대 배치

2) 스크롤 후 상단에 붙는 헤더

3) 화면 우하단 floating 버튼

2. position 종류별 실습

1️⃣ static

1) 기본

2) vertical-align

2️⃣ relative

1) 기본

3️⃣ absoulte

1) 기본

2) 위치 조정

3) 위치 고정

3) absolute 후 부모 박스 안에 위치 고정 (예시 1)

4) absolute 후 부모 박스 안에 위치 고정 (예시 2)

4️⃣ fixed

1) 기본

1) `static` (기본값)

2) `relative` (상대 위치)

3) `absolute` (절대 위치)

4) `fixed` (고정 위치)

5) `sticky` (스티키, 조건부 고정) 안 배움

1️⃣ `static`

2) `vertical-align`