[HTML/CSS] 9. CSS Position

김미숙

Mar 10, 2025

Contents

1. position 속성 값 2. 각 속성의 동작 방식 3. z-index (겹치는 요소 순서 조정)4. position 속성 정리

‼️

요소를 어떻게 배치할지를 결정하는 속성

1. `position` 속성 값

속성 값	설명
`static`	기본값 (좌표 설정 불가, 문서 흐름 유지)
`relative`	자기 자신을 기준으로 이동 가능
`absolute`	가장 가까운 `position: relative` 조상 기준으로 이동
`fixed`	뷰포트(화면)를 기준으로 고정
`sticky`	스크롤에 따라 `relative` → `fixed`로 전환

2. 각 속성의 동작 방식

1️⃣ `static` (기본값)

position 속성을 지정하지 않으면 자동으로 적용

top, left, right, bottom 속성 사용 불가


<!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>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
  </body>
</html>

2️⃣ `relative` (자기 자신을 기준)

원래 위치에서 top, left, right, bottom 값을 이용해 이동 가능

문서 흐름을 유지하면서 이동

✅ 원래 위치를 기준으로 이동하지만, 차지하는 공간은 그대로 남아 있음.


<!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: 100px;
        left: 100px;
      }

      .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>

3️⃣ `absolute` (가장 가까운 `relative` 조상을 기준)

‼️

absolute

종이가 한 장 더 만들어진다 !

기본적으로 body(최상위 요소)를 기준으로 배치

부모 중 position: relative가 있으면 그 부모를 기준으로 이동

문서 흐름에서 제거됨 (공간 차지하지 않음)

✅ relative가 적용된 부모를 기준으로 위치가 설정됨.


<!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>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
  </body>
</html>


<!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;
        top: 100px;
        left: 0px;
      }

      .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>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
  </body>
</html>

특정 요소를 특정 위치에 배치할 때

놀게 하고 싶은 박스 안에 놀 박스를 넣기

부모 박스에 position를 relative로 준다

자식 박스에 position를 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;
        position: relative;
      }

      .box5 {
        width: 50px;
        height: 50px;
        background-color: bisque;
        display: inline-block;
        position: absolute;
        left: 100px;
        bottom: 100px;
      }
    </style>
  </head>

  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"><div class="box5"></div></div>
  </body>
</html>

4️⃣ `fixed` (화면을 기준으로 고정)

스크롤해도 움직이지 않음 (뷰포트 기준)

absolute와 비슷하지만, relative 부모의 영향을 받지 않음

✅ 화면의 오른쪽 상단(10px)에서 항상 고정된 위치에 있음.


<!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;
        position: fixed;
        top: 300px;
      }

      .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>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
    <div class="box5"></div>
  </body>
</html>

5️⃣ `sticky` (스크롤에 따라 `relative` → `fixed`로 변경)

특정 지점까지는 relative처럼 움직이다가, 특정 지점에서 fixed처럼 고정됨

top, left, right, bottom 값이 필요함

✅ 화면을 스크롤하면 top: 50px 위치에서 고정됨.

3. `z-index` (겹치는 요소 순서 조정)

position: static을 제외한 요소에 적용 가능

값이 클수록 위에 표시됨

4. `position` 속성 정리

속성 값	기준	문서 흐름 영향	스크롤 시 위치 변화
`static`	없음	유지	변함 없음
`relative`	자기 자신	유지	변함 없음
`absolute`	가장 가까운 `relative` 조상	제거됨	변함 없음
`fixed`	화면(뷰포트)	제거됨	고정됨
`sticky`	가장 가까운 스크롤 가능한 부모	유지	특정 지점에서 고정됨

💡 언제 사용하면 좋을까?

relative → 내부 요소(absolute)의 기준이 필요할 때

absolute → 특정 요소를 특정 위치에 배치할 때

fixed → 네비게이션 바, 버튼 등을 항상 고정하고 싶을 때

sticky → 특정 위치에서 고정되는 헤더 등을 만들 때

Contents

1. position 속성 값 2. 각 속성의 동작 방식 3. z-index (겹치는 요소 순서 조정)4. position 속성 정리

<!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; } .box5 { width: 50px; height: 50px; background-color: bisque; display: inline-block; position: absolute; left: 100px; bottom: 100px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"><div class="box5"></div></div> </body> </html>

<!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; position: fixed; top: 300px; } .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> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> <div class="box5"></div> <div class="box5"></div> <div class="box5"></div> <div class="box5"></div> <div class="box5"></div> <div class="box5"></div> <div class="box5"></div> <div class="box5"></div> <div class="box5"></div> <div class="box5"></div> <div class="box5"></div> <div class="box5"></div> <div class="box5"></div> <div class="box5"></div> </body> </html>

[HTML/CSS] 9. CSS Position

1. position 속성 값

2. 각 속성의 동작 방식

1️⃣ static (기본값)

2️⃣ relative (자기 자신을 기준)

3️⃣ absolute (가장 가까운 relative 조상을 기준)

특정 요소를 특정 위치에 배치할 때

4️⃣ fixed (화면을 기준으로 고정)

5️⃣ sticky (스크롤에 따라 relative → fixed로 변경)

3. z-index (겹치는 요소 순서 조정)

4. position 속성 정리

💡 언제 사용하면 좋을까?

[HTML/CSS] 9. CSS Position

1. position 속성 값

2. 각 속성의 동작 방식

1️⃣ static (기본값)

2️⃣ relative (자기 자신을 기준)

3️⃣ absolute (가장 가까운 relative 조상을 기준)

특정 요소를 특정 위치에 배치할 때

4️⃣ fixed (화면을 기준으로 고정)

5️⃣ sticky (스크롤에 따라 relative → fixed로 변경)

3. z-index (겹치는 요소 순서 조정)

4. position 속성 정리

💡 언제 사용하면 좋을까?

1. `position` 속성 값

1️⃣ `static` (기본값)

2️⃣ `relative` (자기 자신을 기준)

3️⃣ `absolute` (가장 가까운 `relative` 조상을 기준)

4️⃣ `fixed` (화면을 기준으로 고정)

5️⃣ `sticky` (스크롤에 따라 `relative` → `fixed`로 변경)

3. `z-index` (겹치는 요소 순서 조정)

4. `position` 속성 정리

1. `position` 속성 값

1️⃣ `static` (기본값)

2️⃣ `relative` (자기 자신을 기준)

3️⃣ `absolute` (가장 가까운 `relative` 조상을 기준)

4️⃣ `fixed` (화면을 기준으로 고정)

5️⃣ `sticky` (스크롤에 따라 `relative` → `fixed`로 변경)

3. `z-index` (겹치는 요소 순서 조정)

4. `position` 속성 정리