CSS 앵커 포지셔닝 — 툴팁, 드롭다운 위치를 JS 없이 잡기

드롭다운이나 툴팁을 만들 때마다 똑같은 고민을 한다. 버튼 바로 아래에 메뉴를 띄우고 싶은데, 위치 계산을 어떻게 하지. 보통은 부모에 position: relative 걸고 자식에 position: absolute 걸어서 처리한다.

근데 이 방식은 메뉴가 부모 박스 안에 갇힌다. overflow: hidden이 걸린 조상이 있으면 잘려나가고, 화면 끝에서 메뉴가 밖으로 삐져나가는 것도 직접 막아야 한다. 결국 Floating UI 같은 라이브러리를 붙이거나, getBoundingClientRect()로 좌표를 계산하는 JS를 짜게 된다.

CSS Anchor Positioning은 이걸 CSS만으로 해결한다. 어떤 요소든 "앵커"로 지정하고, 다른 요소를 그 앵커에 상대적으로 배치할 수 있다. DOM 구조상 부모-자식 관계가 아니어도 된다.

기본 사용법

앵커가 될 요소에 anchor-name을 주고, 따라다닐 요소에서 anchor() 함수로 위치를 잡는다.

.trigger {
  anchor-name: --menu-anchor;
}

.menu {
  position: absolute;
  /* 앵커의 아래쪽 끝에 메뉴의 위쪽을 맞춤 */
  top: anchor(--menu-anchor bottom);
  left: anchor(--menu-anchor left);
}

anchor(--menu-anchor bottom)은 "그 앵커의 bottom 모서리 위치"를 값으로 돌려준다. 그래서 top에 넣으면 메뉴 위쪽이 앵커 아래쪽에 붙는다. 좌표 계산을 브라우저가 대신 해주는 셈이다.

position-area로 더 간결하게

방향만 잡으면 되는 경우엔 anchor()를 일일이 안 써도 된다. position-area가 9분할 그리드처럼 동작한다.

.menu {
  position: absolute;
  position-anchor: --menu-anchor;
  position-area: bottom center;  /* 앵커 아래쪽 가운데 */
}

bottom center, top span-right 같은 식으로 영역만 지정하면 끝이다. 코드가 훨씬 읽기 쉬워진다.

화면 밖으로 나갈 때 폴백

이게 진짜 핵심이다. 메뉴가 뷰포트 아래로 잘릴 것 같으면 자동으로 위로 뒤집고 싶다. position-try-fallbacks로 처리한다.

.menu {
  position: absolute;
  position-anchor: --menu-anchor;
  position-area: bottom center;
  position-try-fallbacks: flip-block;
}

flip-block은 세로 방향으로 공간이 부족하면 위아래를 뒤집는다. flip-inline은 가로 방향. 두 개 다 주면 모서리에서도 알아서 자리를 잡는다. JS로 짜던 충돌 감지 로직이 한 줄로 줄어든다.

정리

Popover API와 같이 쓰면 궁합이 좋다. popover 속성으로 레이어 띄우는 건 HTML이 맡고, 위치는 앵커 포지셔닝이 맡는 식이다.

2026년 기준 Chrome·Edge는 안정적으로 지원하고, Safari는 일부, Firefox는 아직 플래그 뒤에 있다. 그래서 프로덕션에서는 @supports (anchor-name: --x)로 감싸고, 미지원 브라우저는 기존 absolute 방식으로 폴백하는 게 안전하다. 그래도 단순한 툴팁·드롭다운이라면 라이브러리 하나를 통째로 걷어낼 수 있어서, 새 프로젝트에선 한 번 써볼 만하다.