CSS Position 완전정복
요소의 위치를 자유롭게 — static부터 sticky까지
static
relative
absolute
fixed
sticky
z-index
CHAPTER 01
position 개요
position 속성은 요소가 문서 안에서 어떻게 배치될지 결정해요. 기본값은
static이며, 위치 이동은 top / right / bottom / left로 해요.5가지 값 한눈에 보기
LIVE PREVIEW — 각 버튼을 눌러 차이를 확인해보세요
static
relative
static
static: 기본값 — 위치 이동 불가, 문서 흐름대로 배치
position
값별 특징 요약
| 값 | 기준점 | 문서 흐름 | 주요 용도 |
|---|---|---|---|
| static | 없음 | 유지 | 기본값, 초기화 |
| relative | 자기 본래 위치 | 유지 | absolute의 기준점 |
| absolute | 가장 가까운 relative 조상 | 이탈 | 뱃지, 말풍선, 오버레이 |
| fixed | 뷰포트(화면) | 이탈 | 네비게이션, 위로버튼, 모달 |
| sticky | 스크롤 임계점 | 유지→고정 | 스크롤 헤더, 사이드바 |
CHAPTER 02
relative
요소의 본래 위치를 기준으로 이동해요. 문서 흐름은 그대로 유지되고, 빈 자리도 유지돼요. 주로 absolute의 기준점으로 사용해요.
코드
.box {
position: relative;
top: 20px; /* 본래 위치에서 아래로 20px */
left: 30px; /* 본래 위치에서 오른쪽으로 30px */
}
/* 본래 자리는 그대로 — 유령처럼 이동 */
position: relative;
top: 20px; /* 본래 위치에서 아래로 20px */
left: 30px; /* 본래 위치에서 오른쪽으로 30px */
}
/* 본래 자리는 그대로 — 유령처럼 이동 */
라이브 프리뷰
LIVE PREVIEW — top/left 값 조절
일반 박스
본래 자리
relative
일반 박스
top
0px
left
0px
⚠️ relative로 자식을 이동하는 건 비추천!
relative는 absolute의 기준점 역할이 주목적이에요. 요소를 직접 이동할 때는 margin이나 transform을 쓰는 게 더 나아요.
relative는 absolute의 기준점 역할이 주목적이에요. 요소를 직접 이동할 때는 margin이나 transform을 쓰는 게 더 나아요.
CHAPTER 03
absolute
가장 가까운 position이 relative인 부모포함 가장 가까운 조상 요소를 기준으로 위치를 잡아요. 문서 흐름에서 이탈해서 다른 요소들이 그 자리를 채워요. 부모 relative + 자식 absolute를 세트로 사용해요.
코드
/* 부모 — 기준점 역할 */
.parent { position: relative; }
/* 자식 — 부모 기준으로 위치 */
.badge {
position: absolute;
top: 20px;
right: 20px;
}
/* relative 부모 없으면 → body 기준으로 배치됨! */
.parent { position: relative; }
/* 자식 — 부모 기준으로 위치 */
.badge {
position: absolute;
top: 20px;
right: 20px;
}
/* relative 부모 없으면 → body 기준으로 배치됨! */
라이브 프리뷰 — 뱃지 위치 조절
LIVE PREVIEW — 뱃지(absolute)를 카드(relative) 위에 배치
카드 컨텐츠
position: relative
position: relative
뱃지
top: 12px
right: 12px
top
12px
right
12px
relative 부모 없으면?
✅ 부모에 relative 있음
부모 (relative)
뱃지
❌ 부모에 relative 없음
부모 (static)
뱃지가 여기!
💡 absolute는 relative를 찾아 올라가요!
부모 → 부모의 부모 → ... 순서로 올라가면서 position이 relative(또는 absolute, fixed, sticky)인 요소를 찾아요. 없으면 body를 기준으로 해요.
부모 → 부모의 부모 → ... 순서로 올라가면서 position이 relative(또는 absolute, fixed, sticky)인 요소를 찾아요. 없으면 body를 기준으로 해요.
CHAPTER 04
fixed
뷰포트(화면)를 기준으로 고정돼요. 스크롤해도 항상 같은 자리에 있어요. 네비게이션, 위로 버튼, 모달 배경에 사용해요.
코드
/* 네비게이션 고정 */
header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
}
/* 위로 버튼 */
.top-btn {
position: fixed;
right: 20px;
bottom: 30px;
}
header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
}
/* 위로 버튼 */
.top-btn {
position: fixed;
right: 20px;
bottom: 30px;
}
라이브 프리뷰 — 스크롤해도 고정
LIVE PREVIEW — 아래 박스를 스크롤해보세요
🔒 fixed 헤더 — 스크롤해도 상단 고정!
콘텐츠 1 — 스크롤해보세요 ↓
콘텐츠 2
콘텐츠 3
콘텐츠 4
콘텐츠 5
콘텐츠 6
↑
↑ 버튼은 박스 오른쪽 하단에 항상 고정 — 실제 fixed처럼 스크롤해도 안 움직여요
⚠️ fixed는 문서 흐름에서 완전히 이탈해요. 고정 헤더가 있으면 본문 상단에 헤더 높이만큼
padding-top을 줘야 콘텐츠가 가려지지 않아요!CHAPTER 05
sticky
스크롤하다가 지정한 위치에 닿으면 고정돼요. 그 전까지는 relative처럼 동작해요. 스크롤 헤더, 목차 사이드바에 많이 써요.
코드
section {
position: sticky;
top: 0; /* 뷰포트 상단에서 0px이 되면 고정 */
}
/* 주의: 부모에 overflow: hidden이 있으면 sticky 안 됨! */
position: sticky;
top: 0; /* 뷰포트 상단에서 0px이 되면 고정 */
}
/* 주의: 부모에 overflow: hidden이 있으면 sticky 안 됨! */
라이브 프리뷰 — 스크롤해서 sticky 확인
LIVE PREVIEW — 스크롤하면 배너가 상단에 달라붙어요
콘텐츠 1 — 스크롤 내려보세요 ↓
콘텐츠 2
📌 sticky 요소 — top:0에서 고정!
콘텐츠 3
콘텐츠 4
콘텐츠 5
콘텐츠 6
fixed vs sticky 차이
fixed
• 항상 뷰포트 기준 고정
• 문서 흐름 이탈
• 스크롤과 무관하게 항상 같은 자리
• 네비, 모달, 위로버튼
• 문서 흐름 이탈
• 스크롤과 무관하게 항상 같은 자리
• 네비, 모달, 위로버튼
sticky
• 스크롤 임계점에서만 고정
• 문서 흐름 유지
• 부모 영역을 벗어나면 같이 사라짐
• 스크롤 헤더, 목차, 사이드바
• 문서 흐름 유지
• 부모 영역을 벗어나면 같이 사라짐
• 스크롤 헤더, 목차, 사이드바
💡 sticky가 안 먹힐 때 체크리스트:
1.
2. 부모에
3. 부모 높이가 충분해야 해요
1.
top 값이 없으면 작동 안 해요2. 부모에
overflow: hidden이 있으면 작동 안 해요3. 부모 높이가 충분해야 해요
CHAPTER 06
z-index
요소들이 겹칠 때 앞뒤 순서를 정해요. 숫자가 클수록 앞에 나와요. position이 static이 아닌 요소에만 적용돼요.
코드
.modal-bg { position: fixed; z-index: 100; }
.modal { position: fixed; z-index: 101; }
.header { position: fixed; z-index: 50; }
.tooltip { position: absolute; z-index: 10; }
/* z-index는 position이 static이 아닌 요소에만 작동 */
.modal { position: fixed; z-index: 101; }
.header { position: fixed; z-index: 50; }
.tooltip { position: absolute; z-index: 10; }
/* z-index는 position이 static이 아닌 요소에만 작동 */
라이브 프리뷰 — z-index 조절
LIVE PREVIEW — 파란 박스의 z-index를 바꿔보세요
노란 박스
z-index: 2
z-index: 2
초록 박스
z-index: 3
z-index: 3
파란 박스
z-index: 1
z-index: 1
파란 박스 z-index
1
⚠️ z-index는 같은 쌓임 맥락(stacking context) 안에서만 비교돼요. 부모에 z-index가 있으면 자식이 아무리 높은 z-index를 줘도 부모 밖으로 나갈 수 없어요!
CHAPTER 07
static (초기화)
position의 기본값이에요. 반응형 작업에서 데스크탑에서 absolute나 fixed로 설정한 것을 모바일에서 원래대로 돌릴 때 사용해요.
코드 — 반응형에서 초기화
/* 데스크탑 */
.tit-box {
position: absolute;
top: 0; left: 0;
width: 40%;
}
/* 모바일 — absolute를 풀어서 원래 흐름으로 */
@media (max-width: 768px) {
.tit-box {
position: static; /* 초기화! */
width: 100%;
}
}
.tit-box {
position: absolute;
top: 0; left: 0;
width: 40%;
}
/* 모바일 — absolute를 풀어서 원래 흐름으로 */
@media (max-width: 768px) {
.tit-box {
position: static; /* 초기화! */
width: 100%;
}
}
라이브 프리뷰
LIVE PREVIEW — NH농협 예제처럼 absolute ↔ static 전환
.tit-box
position: absolute
position: absolute
나머지 콘텐츠 영역
position
✅
absolute → static으로 바꾸면 요소가 다시 문서 흐름으로 돌아와요.
position: static은 반응형에서 자주 나오는 패턴이에요.absolute → static으로 바꾸면 요소가 다시 문서 흐름으로 돌아와요.
CHAPTER 08
실습 예제
오늘 배운 position 개념을 실제 사이트 레이아웃에 적용해보아요.
SBS 골프 — relative + absolute 뱃지
li {
position: relative; /* 기준점 */
}
.relationship {
position: absolute;
right: 20px;
top: 20px; /* li 우상단에 뱃지 고정 */
}
position: relative; /* 기준점 */
}
.relationship {
position: absolute;
right: 20px;
top: 20px; /* li 우상단에 뱃지 고정 */
}
LIVE PREVIEW
⛳ 선수관계도
박현경
👁 17,728 💬 116
앤코스라이브러리 — absolute hover 슬라이드 오버레이
div { position: relative; overflow: hidden; }
.box {
position: absolute;
left: -100%; /* 처음엔 왼쪽 밖에 숨김 */
width: 100%; height: 100%;
}
a:hover .box {
left: 0; /* hover시 슬라이드 인 */
transition: 0.5s;
}
.box {
position: absolute;
left: -100%; /* 처음엔 왼쪽 밖에 숨김 */
width: 100%; height: 100%;
}
a:hover .box {
left: 0; /* hover시 슬라이드 인 */
transition: 0.5s;
}
LIVE PREVIEW — 마우스 올려보세요