HTML/CSS

[HTML/CSS] 9. CSS Position

김미숙's avatar
김미숙
Mar 10, 2025
[HTML/CSS] 9. CSS Position
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>
notion image
 

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>
notion image
 

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>
notion image
<!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>
notion image

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

  1. 놀게 하고 싶은 박스 안에 놀 박스를 넣기
  1. 부모 박스에 position를 relative로 준다
  1. 자식 박스에 position를 absolute로 준다
  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;
        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>
notion image

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>
notion image

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 → 특정 위치에서 고정되는 헤더 등을 만들 때
Share article

parangdajavous

RSS·Powered by Inblog