
CSS에서 레이아웃을 만들다 보면 "이 요소 왜 여기 있어?", "왜 고정이 안 되지?" 같은 혼란이 생기죠.그 핵심 원인은 바로 position 속성을 정확히 이해하지 못해서입니다.이번 포스팅에서는 CSS position 속성의 5가지 값인static, relative, absolute, fixed, sticky를 실제 예제와 함께 정리해드립니다. ✅ position: static (기본값)모든 요소는 기본적으로 position: static입니다.별도로 좌표를 지정해도 무시되며, HTML의 문서 흐름에 따라 배치됩니다.div { position: static; top: 20px; /* ❌ 적용되지 않음 */} ✅ position: relative기존 위치(문서 흐름)를 기준으로 상대적으로 이동합..