한 줄 요약
absolute는 흐름에서 완전히 빠져나와, 기준이 되는 상자의 모서리를 기준으로 위치를 잡습니다.
비유로 이해하기
지도 위에 꽂는 핀을 떠올려 보세요. 핀은 지도 위의 다른 그림을 밀어내지 않고, “지도 왼쪽 위에서 오른쪽으로 3cm, 아래로 2cm”처럼 지도 모서리를 기준으로 꽂힙니다.
position: absolute가 이 핀입니다. 줄(흐름)에서 빠져나오기 때문에 원래 자리는 사라지고, 다른 요소들은 마치 이 요소가 없는 것처럼 배치됩니다. 그리고 위치는 기준 상자(가장 가까운, position이 static이 아닌 조상)의 모서리를 기준으로 정해집니다.
비교해 보기
- relative: 자리를 비워 두고 옮김. 주변은 그대로.
- absolute: 자리를 아예 반납하고 떠남. 주변 요소들이 그 빈자리를 채웁니다.
top: 0; right: 0;은 “기준 상자의 오른쪽 위 모서리에 딱 붙여라”라는 뜻입니다.
직접 실행해 보기
핀의 top, right 값을 바꿔 보세요. 그리고 right를 지우고 left: 0;, top을 bottom: 0;으로 바꾸면 핀이 왼쪽 아래 모서리로 이동합니다.
GenerateBlocks에서는
GenerateBlocks에서 요소의 Position을 Absolute로 바꾸면 흐름에서 빠집니다. 독립학교 홈 히어로 이미지 위에 떠 있는 ‘오늘의 작은 과제’ 카드가 바로 이 방식으로 만들어졌어요.
참고: MDN: position · MDN: Containing block · CSS-Tricks: position