CSS Position 요약 정리

CSS Study Note

Position

브라우저 동작 원리를 이해하는 position 완전 정복

01 — 5가지 position 속성

static

position 기본값. 일반 문서 흐름(normal flow) 그대로 유지. left/top/right/bottom 적용 안됨.

기본값 flow 유지 방향값 무시

position: static; /* 기본값 */

relative

자신의 원래 위치 기준으로 이동. 원래 자리는 공간 유지. absolute 자식의 기준점 역할로 많이 사용.

자기 기준 공간 유지 기준점 역할

position: relative; left: 20px; top: 10px;

absolute

normal flow에서 제거됨. 가장 가까운 position 지정 조상을 기준으로 이동. 부모 relative + 자식 absolute 세트 사용.

조상 기준 flow 제거 세트 패턴

.parent { position: relative; } .child { position: absolute; right: 0; bottom: 0; }

fixed

뷰포트 기준 고정. 스크롤해도 같은 위치 유지. 네비게이션, 위로가기 버튼, 플로팅 버튼, 모달에 사용.

뷰포트 기준 스크롤 고정 flow 제거

position: fixed; right: 20px; bottom: 20px;

sticky

평소엔 일반 흐름 유지. 지정 위치(top)에 도달하면 고정. 부모 영역을 벗어나면 고정 해제. 부모에 overflow: hidden 있으면 동작 안 함 주의.

평소엔 flow 임계점 고정 부모 영역 내

position: sticky; top: 0;

02 — 핵심 개념

absolute 기준점 어디를 기준으로 움직이나

absolute는 position: static이 아닌 가장 가까운 조상을 기준으로 배치됩니다.
그래서 부모: relative + 자식: absolute 세트 패턴을 씁니다.
부모에 relative가 없으면 계속 위로 올라가 body가 기준이 됩니다.

normal flow 제거 absolute / fixed 적용 시

absolute / fixed 요소는 문서 흐름에서 빠져나옵니다.
→ 부모 높이 계산에서 제외됨
→ 형제 요소들이 자리를 당겨옴
이 때문에 부모 높이가 줄어드는 현상이 발생합니다.

z-index 겹치는 순서 제어

겹치는 요소의 앞뒤 순서를 제어합니다.
단, position: static에서는 동작하지 않음.
relative / absolute / fixed / sticky 가 있어야 z-index 적용 가능.

position: relative; z-index: 10;

absolute → 블록화 display 특성 변화

인라인 요소(span 등)에 absolute / fixed 적용 시
width, height, margin 등이 블록처럼 자유롭게 적용됩니다.
별도로 display: block / inline-block 없어도 됩니다.

03 — 실무 활용 패턴

쇼핑몰 카드 뱃지 / 버튼

.img-box { position: relative; } button { position: absolute; right: 12px; bottom: 12px; }

Hover 슬라이드 오버레이

div { overflow: hidden; } .box { position: absolute; left: -100%; /* 숨김 */ } a:hover .box { left: 0; transition: 0.5s; }

위로가기 버튼 고정

.top { position: fixed; right: 20px; bottom: 30px; z-index: 99; }

Sticky 섹션 + footer 덮기

section { position: sticky; top: 0; } footer { position: relative; z-index: 1; /* section 위로 */ }

04 — 자주 하는 실수

⚠️

부모에 relative 없음

absolute 기준점이 사라져 body 기준으로 이동. 반드시 부모에 relative 세트로 사용.

⚠️

overflow: hidden 없음

left: -100%로 숨겨도 밖으로 삐져나와 보임. 슬라이드 효과 시 필수.

⚠️

absolute 남용

레이아웃 전체를 absolute로 해결하려는 습관. 꼭 겹칠 때만 사용하고 일반 흐름 유지가 기본.

05 — 한눈에 비교

속성	기준	flow 유지	대표 사용
static	기본 흐름	O	기본 상태 / 리셋용
relative	자기 자신	O	absolute 기준점
absolute	position 조상	X	뱃지, 버튼, overlay
fixed	뷰포트	X	top 버튼, 네비, 모달
sticky	스크롤 위치	O → 고정	sticky 메뉴, 섹션

🎯 수업 핵심 목표

왜 relative를 쓰는가

왜 absolute가 필요한가

왜 부모 높이가 사라지는가

왜 요소가 겹치는가

왜 overflow: hidden이 필요한가

단순 암기가 아니라 브라우저 동작 원리를 이해하는 것