한 줄 요약
absolute로 위치를 잡을 때는 기준이 될 부모에게 position: relative를 주는 것이 기본 공식입니다.
비유로 이해하기
캠핑장에서 텐트를 칠 때 말뚝(부모)을 먼저 박고 로프(자식)를 거기에 묶습니다. 말뚝이 없으면 로프는 엉뚱하게 멀리 있는 나무에 묶이겠죠.
absolute 요소도 똑같습니다. 부모에게 position: relative(말뚝)가 없으면, 위로 계속 거슬러 올라가 결국 페이지 전체를 기준으로 위치를 잡아 버립니다. 카드 모서리에 붙이려던 배지가 화면 구석으로 날아가는 이유입니다.
비교해 보기
- 부모 relative 있음: 배지가 카드의 오른쪽 위 모서리에 붙습니다.
- 부모 relative 없음: 배지가 카드를 벗어나 페이지(또는 더 바깥 상자) 모서리로 날아갑니다.
- 공식: 부모는
relative, 붙일 자식은absolute.
직접 실행해 보기
두 카드 중 왼쪽 카드에만 말뚝(position: relative)이 있습니다. 오른쪽 카드의 NEW 배지가 어디로 갔는지 찾아보세요. 그다음 .card.no-stake에 position: relative;를 추가하면 배지가 제자리로 돌아옵니다.
GenerateBlocks에서는
GenerateBlocks에서 배지나 겹치는 카드를 만들 때도 같은 공식입니다. 바깥 컨테이너의 Position을 Relative로, 안쪽 요소를 Absolute로 설정하세요. 독립학교 홈 히어로의 이미지 영역도 바깥 상자가 relative입니다.
참고: MDN: Containing block · CSS-Tricks: Absolute, Relative, Fixed Positioning · Josh W. Comeau: Understanding Layout Algorithms