🌱 기초 프론트엔드
CSS에서 position: absolute란?
쉽게 이해하기
일반 position은 책상 위에 물건을 순서대로 놓는 거예요. 하지만 absolute는 공중에 떠 있는 포스트잇처럼, 다른 요소들과 상관없이 원하는 위치에 딱 붙일 수 있어요.
핵심 정리
요소를 문서 흐름에서 떼어내 자유롭게 배치하는 방법이에요.
자세히 알아보기
CSS에서 position: absolute는 요소를 일반적인 문서 흐름에서 완전히 분리해서 배치할 수 있게 해줘요. 일반적으로 HTML 요소들은 위에서 아래로, 왼쪽에서 오른쪽으로 차례대로 배치되는데, absolute를 쓰면 이 규칙을 무시하고 정확한 좌표로 위치를 지정할 수 있어요.
absolute를 사용하면 top, right, bottom, left 속성으로 위치를 지정해요. 중요한 건 '어디를 기준으로 할 것인가'인데, 가장 가까운 조상 요소 중 position이 static이 아닌 요소(relative, absolute, fixed 등)를 기준으로 삼아요. 만약 그런 요소가 없다면 최상위인 body를 기준으로 해요.
실무에서는 툴팁, 드롭다운 메뉴, 모달 닫기 버튼, 배지 알림 등을 만들 때 자주 써요. 예를 들어 프로필 사진 우측 상단에 작은 온라인 표시 뱃지를 붙이고 싶다면, 프로필 사진을 position: relative로 설정하고 배지를 position: absolute로 설정한 뒤 top: 0; right: 0;으로 배치하면 돼요.
주의할 점은 absolute 요소는 문서 흐름에서 빠지기 때문에 다른 요소들이 그 자리를 차지하지 않는다는 거예요. 그래서 레이아웃이 겹치거나 깨질 수 있으니 신중하게 사용해야 해요.