개요

CSS Anchor Positioning은 한 요소를 다른 요소에 "앵커"로 연결하여 상대적으로 위치시킬 수 있는 새로운 CSS 기능입니다. 기존에는 JavaScript로 위치를 계산하거나 Floating UI(Popper.js) 같은 라이브러리에 의존해야 했던 툴팁, 드롭다운 메뉴, 팝오버 위치 지정을 순수 CSS만으로 처리할 수 있습니다.

2025년 현재 Chrome과 Edge에서 지원이 시작되었으며, Firefox와 Safari에서도 구현이 진행 중입니다. 점진적 향상 전략으로 도입하기 좋은 시점입니다.

핵심 개념

Anchor Positioning의 핵심은 앵커 요소와 위치 지정 대상 요소 간의 관계를 CSS로 선언하는 것입니다.

  • anchor-name: 앵커가 될 요소에 이름을 지정합니다. anchor-name: --my-anchor
  • position-anchor: 위치 대상 요소가 어떤 앵커를 참조할지 지정합니다.
  • anchor() 함수: 앵커 요소의 가장자리를 기준으로 위치를 계산합니다. top: anchor(bottom)
  • position-area: 앵커 주변 9개 영역 중 하나에 배치합니다 (예: position-area: top center).
  • @position-try: 화면 밖으로 넘칠 때 대체 위치를 지정하는 폴백 메커니즘입니다.

실전 예제

앵커 기반 툴팁과 자동 폴백 위치를 지원하는 드롭다운 예제입니다.

<!-- 앵커 기반 툴팁 -->
<button class="tooltip-anchor">도움말</button>
<div class="tooltip" popover="auto">
  이것은 CSS Anchor로 위치가 지정된 툴팁입니다.
</div>

<!-- 앵커 기반 드롭다운 -->
<button class="dropdown-trigger" popovertarget="dropdown-menu">
  메뉴 열기
</button>
<div id="dropdown-menu" class="dropdown" popover="auto">
  <ul>
    <li><a href="#">프로필</a></li>
    <li><a href="#">설정</a></li>
    <li><a href="#">로그아웃</a></li>
  </ul>
</div>
/* 앵커 설정 */
.tooltip-anchor {
  anchor-name: --tooltip-anchor;
}

/* 툴팁 위치 지정 */
.tooltip {
  position: fixed;
  position-anchor: --tooltip-anchor;

  /* 앵커 아래 중앙에 배치 */
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 8px;

  /* 스타일 */
  background: #1f2937;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  max-width: 250px;
}

/* 화살표 */
.tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  translate: -50%;
  border: 6px solid transparent;
  border-bottom-color: #1f2937;
}

/* 드롭다운 앵커 */
.dropdown-trigger {
  anchor-name: --dropdown-trigger;
}

.dropdown {
  position: fixed;
  position-anchor: --dropdown-trigger;
  top: anchor(bottom);
  left: anchor(start);
  margin-top: 4px;

  /* 폴백: 공간이 부족하면 위로 */
  position-try-fallbacks: flip-block;
}

/* 폴백 위치 커스텀 정의 */
@position-try --above {
  bottom: anchor(top);
  top: auto;
  margin-bottom: 4px;
  margin-top: 0;
}

활용 팁

  • Popover API와 결합하면 JavaScript 없이도 위치가 자동 계산되는 팝오버를 만들 수 있습니다.
  • position-try-fallbacks: flip-block, flip-inline으로 화면 경계에서 자동으로 반대편에 표시합니다.
  • 점진적 향상으로 적용하세요. @supports (anchor-name: --test) { }로 감지하고, 미지원 브라우저에서는 기존 JavaScript 솔루션을 유지합니다.
  • 앵커와 대상 요소가 같은 스크롤 컨테이너에 있지 않아도 동작하므로, top layer 요소(popover, dialog)와 함께 사용하기 좋습니다.
  • 여러 앵커를 사용하여 하나의 요소를 두 앵커 사이에 배치하는 것도 가능합니다.

마무리

CSS Anchor Positioning은 웹 UI에서 가장 까다로웠던 위치 지정 문제를 CSS 선언만으로 해결합니다. Floating UI나 커스텀 JavaScript의 필요성을 크게 줄여주며, 특히 Popover API와의 시너지가 뛰어납니다. 아직 전 브라우저 지원이 완료되지 않았지만, 점진적 향상 방식으로 충분히 도입할 가치가 있는 기능입니다.