CSS Anchor Positioning, 이제 진짜 쓸 수 있을까

CSS Anchor Positioning을 처음 들었을 때, "또 다른 positioning 키워드인가" 싶었다. 근데 써보고 나서 생각이 바뀌었다. 이건 툴팁, 드롭다운, 팝오버 같은 걸 만들 때 JavaScript 없이 구현할 수 있는 방식의 변화다.

CSS Anchor Positioning이 뭔지 한 줄로

한 요소를 다른 요소에 "앵커"해서 위치를 잡는 CSS 기능이다. 예를 들어 버튼 옆에 툴팁을 배치할 때, 지금까지는 JavaScript로 버튼 좌표를 계산해서 position: absolute로 얹었다. 이제 CSS만으로 가능하다.

지금까지 툴팁 어떻게 만들었나

대부분 이런 패턴이었을 거다:

// JavaScript로 위치 계산
const button = document.querySelector('.btn');
const tooltip = document.querySelector('.tooltip');

const rect = button.getBoundingClientRect();
tooltip.style.top = `${rect.bottom + 8}px`;
tooltip.style.left = `${rect.left}px`;

// 스크롤하면 다시 계산...
window.addEventListener('scroll', updatePosition);

아니면 Popper.js, Floating UI 같은 라이브러리를 썼다. 그게 틀린 건 아닌데, 스크롤 이벤트 처리, viewport 넘침 감지 같은 걸 직접 하거나 라이브러리에 의존해야 했다.

CSS Anchor Positioning으로 같은 걸 하면

.button {
  anchor-name: --my-button; /* 앵커 이름 지정 */
}

.tooltip {
  position: absolute;
  position-anchor: --my-button; /* 앵커 연결 */
  
  /* 앵커 기준으로 위치 지정 */
  top: anchor(bottom);    /* 버튼 아래 */
  left: anchor(left);     /* 버튼 왼쪽 정렬 */
  margin-top: 8px;
}

JavaScript 없이 된다. 그리고 스크롤해도 알아서 따라온다.

뷰포트 넘침 처리 - 이게 진짜 킬러 피처

화면 오른쪽 끝에 있는 버튼의 드롭다운이 화면 밖으로 잘리는 경험, 다들 있을 거다. Floating UI 같은 라이브러리가 이걸 자동으로 처리해줬는데, 이제 CSS로 가능하다.

.dropdown {
  position: absolute;
  position-anchor: --trigger;
  
  /* 기본값: 아래에 배치 */
  top: anchor(bottom);
  left: anchor(left);
  
  /* 공간이 없으면 위로 뒤집기 */
  position-try-fallbacks: flip-block;
}

position-try-fallbacks로 대안 배치를 지정할 수 있다. 아래 공간이 없으면 위로, 왼쪽이 잘리면 오른쪽으로 자동 전환된다. 이거 JavaScript로 구현하려면 꽤 복잡한데, 두 줄이면 된다.

브라우저 지원 현황 (2026년 3월 기준)

MDN 기준으로 2026년 1월부터 최신 브라우저에서 동작한다:

• Chrome 125+ ✅
• Edge 125+ ✅
• Opera 111+ ✅
• Safari - 아직 부분 지원 (feature flag 필요) ⚠️
• Firefox - 구현 진행 중 🔜

Safari가 아직 완전하지 않다는 게 제일 아쉬운 부분이다. 모바일 iOS 지원을 생각하면 프로덕션에 바로 쓰기엔 아직 조심스럽다. 폴리필은 있지만, 이 기능 자체가 JavaScript 없이 쓰려는 건데 폴리필이 JS라면... 아이러니하긴 하다.

실무에서 쓸 수 있는 수준인가

솔직하게 말하면, 지금 당장 프로덕션에 100% 전환하기엔 이르다. Safari 지원이 완전해지는 시점이 관건이다.

그래도 쓸 수 있는 상황이 있다:

• Chrome 한정 내부 도구나 대시보드
• 프로그레시브 인핸스먼트 방식 (JS 폴백 + CSS 향상)
• Electron 앱 (Chrome 엔진이니까)

그리고 지금부터 익혀두는 게 맞다. Safari가 따라오면 Floating UI 같은 라이브러리 의존도가 확 줄어들 거다.

간단한 실습 예제

<button class="btn">호버해보세요</button>
<div class="tooltip">CSS만으로 만든 툴팁!</div>

<style>
.btn {
  anchor-name: --btn;
}

.tooltip {
  position: fixed;
  position-anchor: --btn;
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
  margin-top: 8px;
  
  /* 뷰포트 밖으로 나가면 위로 */
  position-try-fallbacks: flip-block;
  
  background: #333;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  
  opacity: 0;
  transition: opacity 0.2s;
}

.btn:hover + .tooltip {
  opacity: 1;
}
</style>

진짜로 JavaScript 한 줄 없다.

마무리

CSS Anchor Positioning은 "드디어 왔네" 싶은 기능이다. 오버레이, 팝오버, 툴팁 계열을 JS 없이 할 수 있다는 건 성능 면에서도, 복잡도 면에서도 의미 있는 변화다. 다만 Safari 지원이 완전해질 때까지는 조금 더 기다리는 게 안전하고, 그 전까지는 Chrome 전용 환경이나 프로그레시브 인핸스먼트 방식으로 먼저 익숙해지는 걸 추천한다.

---

📎 참고 자료

• CSS Anchor Positioning Guide - MDN Web Docs
• CSS Anchor Positioning Guide - CSS-Tricks
• CSS Anchor Positioning: Complete Guide 2026 - DevToolbox