🌱 기초 프론트엔드
CSS Position 속성이란?
쉽게 이해하기
포스트잇을 붙이는 방법과 비슷해요. 그냥 종이에 순서대로 붙일 수도 있고(static), 원래 자리에서 살짝 옮길 수도 있고(relative), 벽 아무데나 딱 붙일 수도 있고(absolute), 항상 눈에 보이게 따라다니게 할 수도 있어요(fixed).
핵심 정리
요소를 원하는 위치에 배치하는 방법을 정하는 속성이에요.
자세히 알아보기
CSS의 position 속성은 요소를 어떻게 배치할지 결정합니다. 5가지 값이 있어요. static, relative, absolute, fixed, sticky입니다.
static은 기본값으로, 문서 흐름대로 배치됩니다. 특별한 위치 지정이 없어요. relative는 원래 위치를 기준으로 상대적으로 이동합니다. top, left 등으로 위치를 조정할 수 있지만, 원래 공간은 그대로 유지돼요.
absolute는 가장 가까운 position이 지정된 부모 요소를 기준으로 절대 위치를 정합니다. 문서 흐름에서 빠져나오기 때문에 다른 요소에 영향을 주지 않아요. 모달 창이나 툴팁을 만들 때 많이 씁니다.
fixed는 브라우저 창(viewport)을 기준으로 고정됩니다. 스크롤해도 항상 같은 위치에 있어요. 상단 네비게이션 바나 '맨 위로' 버튼에 자주 쓰입니다. sticky는 relative와 fixed의 중간으로, 스크롤하다가 특정 위치에 도달하면 고정되는 효과예요.
position을 쓸 때는 z-index도 함께 알아야 해요. 요소들이 겹칠 때 누가 위에 올지 결정하는 속성입니다.