CSS - position 속성과 특징

position : CSS에서 요소의 배치를 결정하는 속성

position 속성 값 (5가지)

1. static (기본값)
2. relative (상대 위치)
3. absolute (절대 위치)
4. fixed (고정 위치)
5. sticky (스크롤 시 고정)

---

1. static (기본값)

특징

• 기본적인 흐름을 따름
• top, left, right, button, z-index 속성이 적용되지 않음

.box {
  position: static; <!-- 이렇게 따로 속성을 작성하지 않아도 기본적으로 적용 -->
  background-color: lightblue;
}

✅ 설명 : position을 지정하지 않으면 기본적으로 static이 적용됩니다.

---

2. relative (상대적인 위치)

특징

• 원래 위치를 기준으로 이동
• top, left, right, bottom 속성 사용 가능

.box {
  position: relative;
  top: 20px;
  left: 30px;
  background-color: lightcoral;
}

✅ 설명 : 해당 요소의 원래 위치에서 top: 20px 아래로, left: 30px 오른쪽으로 이동합니다. 즉, top은 요소의 위쪽 면을 기준으로 아래로 내려가고, left는 요소의 왼쪽 면을 기준으로 오른쪽으로 이동합니다.

만약 부모 요소의 안이 아닌 바깥으로 이동시키고 싶은 경우 -20px과 같이 -(마이너스)를 사용하면 됩니다.

---

3. absolute (절대적인 위치)

특징

• positioning 된 가장 가까운 부모 요소를 기준으로 이동
• 부모 요소가 없는 경우 body를 기준으로 이동

.container {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: lightgray;
}

.box {
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: lightgreen;
}

✅ 설명 : .box는 .container를 기준으로 top: 50px, left: 50px 위치에 배치됩니다.

---

4. fixed (고정된 위치)

특징

• 화면(viewport)을 기준으로 위치가 고정
• 스크롤해도 움직이지 않음

.box {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background-color: lightskyblue;
}

✅ 설명 : 화면의 오른쪽 아래에 고정된 요소(예: "맨 위로 가기" 버튼)처럼 동작합니다.

---

5. sticky (스크롤 시 고정)

특징

• 화면(viewport)을 기준으로 위치가 고정
• 기본적으로 relative, 특정 조건에서 fixed처럼 동작
• 스크롤이 특정 지점에 도달하면 fixed처럼 고정

.box {
  position: sticky;
  top: 20px;
  background-color: lightpink;
}

✅ 설명 : 스크롤하다가 top: 20px 지점에 도달하면 화면에 고정됩니다.

---

요약

속성	기준	특징
static	기본 흐름	기본값, top, left 등 적용 안 됨
relative	원래 위치	원래 위치 기준으로 이동 가능
absolute	relative 부모 또는 body	부모 기준으로 이동
fixed	화면(viewport)	스크롤해도 고정됨
sticky	뷰포트 + 특정 위치	특정 위치에서 고정됨

🛠 활용 예시

• absolute : 카드 레이아웃에서 특정 요소 배치
• fixed : 네비게이션 바 고정
• sticky : 테이블 헤더 고정