CSS 기초(4) position

CSS에서 요소를 어디에 놓을지(위치) 결정하는 속성

​

총 5가지:

1. static (기본값)
2. relative
3. absolute
4. fixed
5. sticky

​

1. static (기본값)

position: static;

• 모든 HTML 요소의 기본 상태
• 그냥 흐름대로(위→아래) 배치됨
• top, left 같은 ‘위치 이동값’ 사용 불가능

→ 딱히 스타일 지정 안 했을 때의 기본 레이아웃

​

​

2. relative (상대 위치)

position: relative;

top: 10px;

left: 20px;

​

원래 있던 자리 기준으로 움직인다

✔ 흘러가는 자리는 그대로 유지됨(공간 차지 O)

예시)

원래 위치에서 조금만 밀고 싶을 때 사용

📌 relative의 중요한 역할:

→ absolute를 위한 기준점이 되어준다!

​

​

3. absolute (절대 위치)

position: absolute;

top: 20px;

right: 10px;

​

1) absolute는 가장 가까운 position 요소 기준으로 움직인다

즉,

• 부모 또는 조상 중에서

position: relative / absolute / fixed / sticky 하나라도 있으면 → 그 요소 기준으로 위치가 결정됨

• 없으면→ 화면 전체(body) 기준

​

2) absolute는 공간을 차지하지 않는다

레이아웃 흐름에서 빠짐.

예: 버튼 위에 배지 뱃지 숫자 표시 같은 것

​

4. fixed (화면에 고정)

position: fixed;

bottom: 20px;

right: 20px;

​

화면에 완전히 고정

✔ 스크롤해도 안 움직임

예

• 오른쪽 아래 “맨 위로 가기” 버튼
• 고정된 상단 네비게이션 등

​

5. sticky (스크롤 시 달라붙는 형태)

position: sticky;

top: 0;

​

평소에는 static처럼 있다가

✔ 스크롤할 때 특정 지점에 오면 딱 “고정”되는 방식

예:

• 유튜브 댓글의 작은 헤더
• 쇼핑몰 상품 옵션바

​

position	기준	공간 차지	스크롤 움직임
static	레이아웃 흐름	O	O
relative	원래 위치	O	O
absolute	가장 가까운 position 요소	X	O
fixed	화면(뷰포트)	X	X
sticky	스크롤 기준 + top 값	O	조건부 X