내 웹 개발 여정 10일 차 — CSS 포지션 마스터하기: Absolute, Relative, Fixed & Sticky

Source: Dev.to

절대 위치 — “떠다니는 요소 트릭”

/* Box 1 */
position: absolute;

position: absolute;를 Box 1에 적용하면 해당 요소가 일반 문서 흐름에서 제거되어 Box 2가 차지하던 공간이 메워지고, Box 3도 위로 이동합니다—마치 테트리스 조각이 사라지는 것과 같습니다.

같은 효과는 Box 2나 Box 3에 position: absolute;를 적용해도 발생합니다.

상대 위치 — “부모가 중요해요!”

구조

• outer – 부모 컨테이너
• inner – 자식 요소
• text – 손자 요소

초기 시도

/* text */
position: absolute;
left: 50%;

요소가 전체 뷰포트를 기준으로 가운데에 배치됩니다. 부모를 기준으로 하지 않습니다.

해결 방법

/* inner (parent) */
position: relative;

이제 절대 위치가 적용된 text 요소의 left: 50%는 부모(inner)를 기준으로 계산되어 기대한 대로 배치됩니다.

Reminder: position: absolute;는 위치가 지정된 조상(position: relative;, absolute, fixed, 또는 sticky)과 함께 작동합니다.

고정 위치 — “움직이지 않는 박스”

/* fixed element */
position: fixed;
top: 10px;
right: 10px;

페이지를 스크롤해도 요소는 뷰포트에 고정된 채 남아 있습니다.

일반적인 사용 사례로는 네비게이션 바, 플로팅 액션 버튼, 스크롤 중에도 계속 보여야 하는 채팅 아이콘 등이 있습니다.

스티키 위치 — “하이브리드 모드”

/* sticky element */
position: sticky;
top: 0;

스티키 요소는 스크롤이 정의된 임계값(top: 0)에 도달하기 전까지는 상대 위치 요소처럼 동작하고, 그 이후에는 해당 위치에 “붙어” 고정 요소처럼 동작합니다.

보통 스티키 헤더나 섹션 제목처럼 스크롤 중에도 계속 보이게 해야 할 때 사용됩니다.

마무리 생각

CSS 포지셔닝을 연습하면서 값 자체를 외우는 것보다 absolute, relative, fixed, sticky 각각이 주변과 어떻게 상호작용하는지를 이해하는 것이 더 중요하다는 것을 깨달았습니다. 이 기본기를 마스터하면 원하는 위치에 정확히 요소를 배치할 수 있습니다.

다음 주제: CSS z-index와 스태킹 컨텍스트 탐구. 웹 개발 여정의 Day 11을 기대해 주세요!