카드 오른쪽 위에 붙여야 할 배지가 화면 오른쪽 위로 달아나는 현상은 absolute가 고장 난 것이 아니다. 절대 위치 요소는 자신이 기준으로 삼을 가장 가까운 위치 지정 조상을 찾는다.
부모에 relative를 두면 기준 상자가 생긴다
도식에서 배지는 문서 전체가 아니라 position: relative가 지정된 카드의 경계를 기준으로 움직인다. 같은 구조를 HTML과 CSS로 확인해 보자.
<article class="card">
<span class="badge">NEW</span>
<h2>제목</h2>
</article>.card { position: relative; }
.badge {
position: absolute;
top: 12px;
right: 12px;
}.card의 position: relative는 화면에서 원래 흐름을 유지하면서 자식 배지의 기준 상자가 된다. top, right는 카드 모서리에서 계산되므로 카드가 목록 안에서 움직여도 배지는 함께 움직인다.
카드를 두 개 나란히 놓고 각각의 배지가 자기 카드 오른쪽 위에 남는지 확인해 보자. 부모의 position: relative를 지웠을 때 두 배지가 엉뚱한 기준으로 이동한다면, 위치 지정 조상이 바뀐 것이다. 개발자 도구에서 가장 가까운 위치 지정 조상을 찾는 것이 숫자를 무작정 바꾸는 것보다 빠르다.
absolute는 일반 문서 흐름에서 빠진다
절대 위치 요소는 주변 요소의 공간을 차지하지 않는다. 그래서 배지가 제목을 가리거나 카드 높이를 늘리지 않는 것이 정상이다. 장식 배지에는 유용하지만, 필수 버튼이나 긴 안내 문구를 absolute로 배치하면 작은 화면에서 내용이 겹칠 수 있다.
내용의 순서와 높이가 중요한 영역은 flex나 grid를 먼저 고려하자. position은 레이아웃의 주 도구라기보다 특정 요소를 겹치게 해야 할 때 쓰는 도구다.
z-index는 숫자 싸움으로 풀지 않는다
배지가 다른 요소 뒤로 숨는다면 먼저 stacking context를 확인한다. transform, opacity, position과 z-index 조합은 새로운 쌓임 맥락을 만들 수 있다. 무조건 z-index: 9999를 넣으면 다른 화면의 팝업과 충돌할 뿐이다. 겹쳐야 하는 요소를 같은 컴포넌트 안에 두고 필요한 범위에서만 순서를 정하자.
핵심 요약
position: absolute는 가장 가까운 위치 지정 조상을 기준으로 배치되고 일반 흐름에서는 빠진다. 카드 안 배지처럼 컴포넌트에 붙는 요소는 부모에 position: relative를 둔다. 콘텐츠 레이아웃에는 flex·grid를 우선하고, z-index는 쌓임 맥락을 확인한 뒤 최소 범위에서 사용하자.
