JS 없이 요소를 붙인다, CSS 앵커 포지셔닝
툴팁, 드롭다운, 팝오버를 만들 때 우리는 늘 같은 고생을 했다. 트리거 요소의 좌표를 JS로 읽고, 스크롤·리사이즈마다 다시 계산하고, 화면을 벗어나면 위치를 뒤집는 코드를 직접 짰다. CSS 앵커 포지셔닝은 이 모든 걸 CSS 선언으로 끌어내린다. 한 요소를 다른 요소에 "묶고", 넘칠 때 알아서 위치를 바꾸게 한다.
"CSS 앵커 포지셔닝은 한 요소를 다른 요소에 상대적으로 배치하는 선언적 방법을 제공한다."web.dev
무슨 일인가
핵심은 세 조각이다. 기준 요소에 anchor-name으로 두 대시로 시작하는 식별자를 주고, 떠 있는 요소(absolute/fixed)가 position-anchor로 그 앵커를 가리킨다. 그다음 position-area로 앵커 주변 3x3 격자에 키워드만으로 붙이거나, anchor() 함수로 특정 변(邊)을 인셋 값으로 받아 정밀 배치한다. 더 중요한 건 position-try-fallbacks다. 요소가 뷰포트를 넘치면 flip-block 같은 전략으로 자동으로 반대편으로 뒤집힌다. JS 충돌 감지 로직이 통째로 사라지는 셈이다.
여러 시각
같은 기능을 세 글이 서로 다른 높이에서 본다.
- web.dev —
anchor-scope로 재사용 컴포넌트의 이름 충돌을 막고anchor-size(),position-visibility까지 묶어, 이 기능을 "JS 없는 선언적 배치"라는 플랫폼 원칙으로 정리한다. - CSS-Tricks 가이드(Juan Diego Rodríguez) — 같은 기능을 레퍼런스로 해부하되, 스펙이 빠르게 바뀌며
inset-area가position-area로 개명되는 등 크롬이 확정 전에 먼저 구현한 현실의 함정을 짚는다. - CSS-Tricks 온보딩 UI(Ryan Trimble) — 이론 대신 장바구니·제품 투어 같은 실제 UI를 만들며, 앵커 포지셔닝을 Popover API·View Transitions와 결합해 접근성과 포커스까지 다룬다.
왜 중요한가
이건 단순한 편의 기능이 아니라 책임의 이동이다. 그동안 floating-ui 같은 라이브러리가 떠안던 좌표 계산과 충돌 회피가 브라우저 엔진으로 내려왔다. 번들 크기가 줄고, 레이아웃 스래싱을 유발하던 JS 측정 코드가 사라진다. 무엇보다 Popover API와 결합하면 상단 레이어(top-layer)에 z-index 전쟁 없이 떠오르는, 의미론적으로도 정확한 디스클로저 요소를 만들 수 있다.
실무 적용
- 툴팁·드롭다운은 JS 좌표 로직을 걷어내고
position-area+position-try-fallbacks조합으로 먼저 시도하라. - 크롬 125+·사파리 26·파이어폭스 147부터 지원하므로, 미지원 브라우저용 정적 fallback 위치를 점진적 향상으로 함께 설계하라.
- 여러 카드가 같은 앵커명을 쓰는 반복 루프에서는
anchor-scope로 스코프를 격리해 엉뚱한 요소에 붙는 사고를 막아라.
Kenny의 관점
AX 관점에서 앵커 포지셔닝의 진짜 가치는 "플랫폼이 의도를 이해하기 시작했다"는 점이다. 좌표는 결과일 뿐 의도가 아니다. "이 패널은 이 버튼에 붙는다"는 의도를 CSS가 직접 표현하면, AI 보조 도구나 스크린리더가 관계를 추론하기도 훨씬 쉬워진다. 다만 스펙이 아직 출렁이고 브라우저 편차가 크니, 나는 이걸 핵심 동작이 아닌 향상 레이어로 깔고 fallback을 기본값으로 본다.
출처
이 글은 아래 원문을 바탕으로 Kenny가 한국어로 요약·정리한 큐레이션입니다.
원문 보기 — web.dev ↗