CSS Anchor Positioning이란?

2026년 초 Baseline에 진입한 CSS Anchor Positioning은 한 요소를 다른 요소에 상대적으로 위치시키는 것을 CSS만으로 구현한다. 기존에 JavaScript 라이브러리(Popper.js, Floating UI)로 처리하던 툴팁, 드롭다운, 팝오버 위치 계산을 순수 CSS로 대체할 수 있다. Chrome 125+, Edge 125+에서 지원되며 다른 브라우저도 빠르게 채택 중이다.

1. 기본 앵커 연결

<!-- HTML -->
<button class="anchor-btn" style="anchor-name: --my-btn">
  메뉴 열기
</button>

<div class="tooltip" style="position-anchor: --my-btn">
  이것은 툴팁입니다
</div>
/* CSS */
.anchor-btn {
  anchor-name: --my-btn;
}

.tooltip {
  /* 앵커에 연결 */
  position: fixed;
  position-anchor: --my-btn;

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

  /* 스타일 */
  background: #333;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
}

2. Popover API + 앵커 포지셔닝

Popover API는 HTML의 popover 속성으로 팝오버를 생성하고, popovertarget 속성으로 트리거를 연결한다. 앵커 포지셔닝과 결합하면 JS 없이 완전한 드롭다운을 만들 수 있다.

<!-- HTML: Popover + Anchor -->
<button popovertarget="menu" style="anchor-name: --menu-btn">
  설정
</button>

<div id="menu" popover style="position-anchor: --menu-btn">
  <ul>
    <li><a href="#">프로필</a></li>
    <li><a href="#">설정</a></li>
    <li><a href="#">로그아웃</a></li>
  </ul>
</div>
/* CSS */
[popover] {
  position: fixed;
  position-anchor: --menu-btn;
  top: anchor(bottom);
  left: anchor(start);
  margin-top: 4px;

  /* 스타일 */
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 160px;
}

[popover] ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

[popover] li a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
}

[popover] li a:hover {
  background: #f5f5f5;
}

3. 자동 폴백 위치 (position-try-fallbacks)

뷰포트 경계에 닿으면 자동으로 위치를 전환하는 폴백을 CSS만으로 설정할 수 있다.

/* 아래 -> 위 -> 오른쪽 -> 왼쪽 순서로 폴백 */
.dropdown {
  position: fixed;
  position-anchor: --trigger;

  /* 기본: 아래 배치 */
  top: anchor(bottom);
  left: anchor(start);

  /* 공간 부족 시 자동 전환 */
  position-try-fallbacks:
    --above,
    --right,
    --left;
}

@position-try --above {
  bottom: anchor(top);
  left: anchor(start);
  top: auto;
}

@position-try --right {
  left: anchor(right);
  top: anchor(start);
}

@position-try --left {
  right: anchor(left);
  top: anchor(start);
  left: auto;
}

/* 내장 폴백 키워드도 사용 가능 */
.simple-dropdown {
  position-try-fallbacks: flip-block, flip-inline;
  /* flip-block: 위아래 전환 */
  /* flip-inline: 좌우 전환 */
}

4. Popover 애니메이션

/* 팝오버 진입/퇴장 애니메이션 */
[popover] {
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 200ms ease,
    transform 200ms ease,
    overlay 200ms ease allow-discrete,
    display 200ms ease allow-discrete;
}

/* 열린 상태 */
[popover]:popover-open {
  opacity: 1;
  transform: translateY(0);
}

/* 시작 스타일 (진입 애니메이션용) */
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: translateY(-8px);
  }
}

5. 실전: 네비게이션 메가 메뉴

<nav>
  <button popovertarget="products-menu"
          style="anchor-name: --products">
    제품
  </button>
  <button popovertarget="docs-menu"
          style="anchor-name: --docs">
    문서
  </button>
</nav>

<div id="products-menu" popover
     style="position-anchor: --products">
  <div class="mega-menu">
    <div class="column">
      <h3>소프트웨어</h3>
      <a href="#">에디터</a>
      <a href="#">컴파일러</a>
    </div>
    <div class="column">
      <h3>하드웨어</h3>
      <a href="#">서버</a>
      <a href="#">네트워크</a>
    </div>
  </div>
</div>

브라우저 호환성과 폴리필

2026년 4월 기준, Chrome/Edge 125+에서 완전 지원되며 Firefox와 Safari도 구현 진행 중이다. OddBird에서 제공하는 폴리필(@oddbird/css-anchor-positioning)을 사용하면 미지원 브라우저에서도 동작한다.

<!-- 폴리필 적용 -->
<script type="module">
  if (!CSS.supports("anchor-name: --a")) {
    import("https://unpkg.com/@oddbird/css-anchor-positioning");
  }
</script>

CSS Anchor Positioning과 Popover API의 조합은 JavaScript 라이브러리 의존성을 제거하고, 접근성이 내장된 UI 컴포넌트를 순수 웹 표준으로 구현할 수 있게 한다.