frontend
CSS Anchor Positioning 완벽 가이드 — JavaScript 없이 툴팁·팝오버 구현
2025년 주요 브라우저에 안착한 CSS Anchor Positioning API로 JavaScript 없이 떠다니는 UI 요소를 정밀하게 배치하는 방법을 상세히 정리하였다.
- ·CSS Anchor Positioning Level 1 스펙: W3C Working Draft
- ·Chrome 125+ 기본 지원 (2024년 5월)
- ·Firefox, Safari: 2025년 하반기 지원 추가
- ·Floating UI·Popper.js 라이브러리를 CSS로 대체
Floating UI로 구현하던 툴팁 컴포넌트를 CSS Anchor Positioning으로 교체하면서 관련 JavaScript 코드 150줄이 CSS 20줄로 줄었다. 특히 뷰포트 경계에서 방향이 자동으로 전환되는 position-try-fallbacks 기능이 JavaScript 계산 없이 동작한다는 점에 큰 만족감을 느꼈다. 아직 Firefox 지원이 완전하지 않아 @supports로 점진적으로 적용하였으며, 지원 브라우저 비율이 90%를 넘자 JavaScript 폴백을 제거할 수 있었다.
CSS Anchor Positioning이란 무엇인가
기존 팝업 배치의 한계
툴팁, 드롭다운, 팝오버 같은 떠있는 UI 요소를 특정 앵커 요소에 상대적으로 배치하는 것은 오랫동안 JavaScript의 영역이었다. Popper.js, Floating UI 같은 라이브러리가 getBoundingClientRect()로 위치를 계산하고 IntersectionObserver로 뷰포트 경계를 감지하여 위치를 동적으로 조정하였다. 이 접근법은 레이아웃 변경마다 JavaScript 계산이 필요하고, 스크롤 이벤트와 리사이즈 이벤트를 구독하는 비용이 따른다. CSS Anchor Positioning은 이 모든 계산을 브라우저 레이아웃 엔진이 직접 처리하도록 하여 JavaScript 없는 정확한 팝업 배치를 가능하게 한다.
anchor-name과 position-anchor의 동작 원리
앵커 요소에 anchor-name: --my-anchor CSS 속성을 지정하면 해당 요소가 앵커로 등록된다. 팝업 요소에는 position-anchor: --my-anchor를 지정하여 어떤 앵커를 기준으로 배치할지 선언한다. 이후 top, left, bottom, right 속성에 anchor() 함수를 사용하여 앵커의 특정 엣지(top, bottom, left, right, center)를 기준점으로 설정한다. 예를 들어 top: anchor(bottom)은 팝업의 위쪽이 앵커의 아래쪽에 정렬됨을 의미한다. 이 모든 배치 계산이 순수 CSS 선언만으로 이루어지며, 브라우저가 스크롤 및 리사이즈에 따라 자동으로 재계산한다.
실전 구현 패턴
툴팁 구현
버튼에 anchor-name을 지정하고, :hover 또는 :focus 상태에서 툴팁 요소를 position: absolute와 anchor() 함수로 배치하면 순수 CSS 툴팁이 완성된다. position-try-fallbacks 속성을 사용하면 팝업이 뷰포트 경계를 벗어날 때 자동으로 반대 방향으로 위치를 전환하는 기능을 CSS만으로 구현할 수 있다. 이 기능은 Floating UI의 flip 미들웨어와 동일한 동작을 JavaScript 없이 제공한다.
Popover API와의 조합
HTML Popover API(popover 속성)와 CSS Anchor Positioning을 조합하면 접근성과 배치 모두를 네이티브로 처리하는 드롭다운 메뉴와 툴팁을 구현할 수 있다. Popover API가 포커스 트래핑, 키보드 탐색, 라이트 디스미스(외부 클릭으로 닫기)를 자동으로 처리하고, Anchor Positioning이 위치 계산을 담당한다. 이 조합은 Headless UI나 Radix UI가 JavaScript로 구현하던 기능을 브라우저 네이티브로 대체한다.
브라우저 지원 현황과 점진적 적용 전략
@supports를 활용한 점진적 향상
CSS Anchor Positioning은 Chrome 125+(2024년 5월)부터 기본 지원되었으며 Firefox와 Safari는 2025년 하반기에 지원이 추가되었다. @supports (anchor-name: --test) 조건부 규칙을 활용하면 지원 브라우저에서는 CSS Anchor Positioning을, 미지원 브라우저에서는 기존 Floating UI 방식을 사용하는 점진적 향상 전략을 구현할 수 있다. 서비스의 타깃 브라우저 지원 현황에 따라 완전 전환 또는 점진적 도입을 결정하는 것이 현실적이다.
자주 묻는 질문
CSS Anchor Positioning을 사용하면 Floating UI 라이브러리를 완전히 제거할 수 있나요?+
브라우저 지원이 완전히 정착된 후에는 대부분의 사용 사례를 대체할 수 있습니다. 다만 복잡한 비즈니스 로직이 포함된 팝업은 여전히 JavaScript가 필요할 수 있습니다.
position: fixed 요소에도 Anchor Positioning을 사용할 수 있나요?+
네. position: fixed 또는 position: absolute 요소에 Anchor Positioning을 적용할 수 있습니다. 스크롤에 따라 위치가 자동으로 업데이트됩니다.
관련 글
CSS :has() 선택자 완벽 가이드 — 드디어 실현된 부모 선택자
CSS :has() 선택자의 작동 원리, 실전 활용 패턴, 폼 상태 스타일링, 컴포넌트 조건부 스타일, JavaScript 대체 사례를 정리하였다.
CSS Container Queries 완벽 가이드 — 컴포넌트 단위 반응형 디자인의 새 표준
CSS Container Queries의 개념, @container 문법, 재사용 가능한 컴포넌트 설계 패턴, Tailwind CSS와의 통합 방법을 실무 예제와 함께 정리하였다.
View Transitions API 완벽 가이드 — 브라우저 네이티브 페이지 전환 애니메이션
View Transitions API의 작동 원리, 공유 요소 전환, SPA·MPA 적용 방법, React·Astro와의 통합 전략을 실무 예제와 함께 정리하였다.