2026-01-31

CSS Position

요소를 어디를 기준으로 배치할지를 정하는 CSS 속성

position: static | relative | absolute | fixed | sticky;

static (기본값)

• 문서 흐름 그대로
• top / left / right / bottom 적용 X

relative

• 자기 자신 원래 위치 기준
• 문서 흐름 유지 O
• 이동해도 원래 자리는 남아 있음
• absolute의 기준점으로 자주 사용

position: relative;
top: 10px;

absolute

• 가장 가까운 position이 있는 조상 요소 기준
• 문서 흐름에서 제거 X
• 기준이 없으면 body 기준

position: absolute;
top: 0;
left: 0;

• 부모에 position: relative 자주 같이 씀

fixed

• 뷰포트(브라우저 화면) 기준
• 스크롤해도 위치 고정

position: fixed;
bottom: 0;

• 헤더, 플로팅 버튼

sticky

• relative + fixed 혼합
• 특정 위치까지는 relative
• 스크롤되면 fixed처럼 동작

position: sticky;
top: 0;

• 섹션 헤더, 탭 메뉴
• 부모에 overflow: hidden/scroll 있으면 동작 안 할 수 있음
• height 부족 / top 값 없음 일때도 동작 안 할 수 있음

비교

참고자료

• https://creamilk88.tistory.com/197
• https://www.daleseo.com/css-position/
• https://velog.io/@soopy368/CSS-position