CSS Anchor Positioning이란?

CSS Anchor Positioning은 특정 요소(앵커)를 기준으로 다른 요소를 정밀하게 배치할 수 있게 해주는 새로운 CSS 스펙입니다. 2024년 Chrome 125에서 처음 정식 지원되었고, 2025~2026년에 걸쳐 Firefox, Safari까지 지원 범위가 넓어지며 실무 적용이 가능해졌습니다.

기존에는 툴팁, 드롭다운, 팝오버 같은 UI를 특정 요소 근처에 배치하려면 JavaScript로 getBoundingClientRect()를 호출하고 position: fixed로 좌표를 수동 계산해야 했습니다. CSS Anchor Positioning은 이 과정을 CSS만으로 해결합니다.

기본 사용법

앵커 요소에 anchor-name을 지정하고, 배치할 요소에서 position-anchor로 참조합니다.

/* 앵커 요소 지정 */
.trigger-button {
  anchor-name: --my-anchor;
}

/* 앵커 기준으로 배치할 요소 */
.tooltip {
  position: absolute;
  position-anchor: --my-anchor;

  /* anchor() 함수로 앵커의 특정 면을 참조 */
  top: anchor(bottom);      /* 앵커 아랫면 기준 */
  left: anchor(left);       /* 앵커 왼쪽 면 기준 */
  margin-top: 8px;
}

anchor() 함수에 사용할 수 있는 값은 top, bottom, left, right, center, start, end 등이 있습니다.

position-area: 간결한 배치 단축 문법

반복적인 top/left/bottom/right 조합 대신 position-area 속성으로 방향을 한 번에 지정할 수 있습니다.

.tooltip {
  position: absolute;
  position-anchor: --my-anchor;

  /* 앵커 아래, 가운데 정렬 */
  position-area: bottom center;
}

.dropdown {
  position: absolute;
  position-anchor: --nav-item;

  /* 앵커 왼쪽 아래 */
  position-area: bottom left;
}

position-area는 2차원 그리드 개념으로, top/center/bottom과 left/center/right를 조합해 9개 방향으로 배치 위치를 지정합니다.

뷰포트 경계 자동 회피: position-try-fallbacks

팝오버가 뷰포트 밖으로 나가는 문제를 CSS만으로 해결할 수 있습니다. position-try-fallbacks로 대체 배치 순서를 지정하면 브라우저가 자동으로 가장 잘 보이는 위치를 선택합니다.

.tooltip {
  position: absolute;
  position-anchor: --my-anchor;
  position-area: top center;

  /* 위에 공간이 없으면 아래, 그래도 없으면 오른쪽 순서로 시도 */
  position-try-fallbacks:
    flip-block,      /* 위↔아래 뒤집기 */
    flip-inline,     /* 좌↔우 뒤집기 */
    flip-block flip-inline; /* 대각선 */
}

flip-block은 블록 방향(위↔아래)으로 뒤집고, flip-inline은 인라인 방향(좌↔우)으로 뒤집습니다. 이 두 가지를 조합하면 4방향 자동 회피가 가능합니다.

커스텀 position-try 규칙 작성

내장 fallback 외에 @position-try로 완전히 커스텀한 배치 규칙을 정의할 수 있습니다.

/* 커스텀 fallback 정의 */
@position-try --below-right {
  position-area: bottom right;
  margin-top: 4px;
}

@position-try --above-left {
  position-area: top left;
  margin-bottom: 4px;
}

.menu {
  position: absolute;
  position-anchor: --trigger;
  position-area: bottom left;

  position-try-fallbacks:
    --below-right,
    --above-left,
    flip-block;
}

Popover API와 함께 사용하기

HTML Popover API와 조합하면 순수 HTML+CSS 툴팁/드롭다운을 완성할 수 있습니다.

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

<div id="my-popup" popover>
  <ul>
    <li>항목 1</li>
    <li>항목 2</li>
    <li>항목 3</li>
  </ul>
</div>
/* CSS */
#my-popup {
  position: absolute;
  position-anchor: --btn;
  position-area: bottom left;
  position-try-fallbacks: flip-block, flip-inline;
  margin-top: 4px;

  /* Popover 기본 스타일 초기화 */
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  min-width: 160px;
}

이 코드는 JavaScript 없이 클릭 시 팝오버가 버튼 아래에 나타나고, 뷰포트 경계를 자동으로 회피합니다.

inset-area vs position-area

초기 스펙에서는 inset-area라는 속성명을 사용했으나, 2024년 표준화 과정에서 position-area로 이름이 변경되었습니다. 일부 구형 예제나 폴리필에서 inset-area가 사용되는 경우가 있으므로, 실무에서는 position-area를 기준으로 작성하고 필요 시 inset-area를 fallback으로 추가합니다.

.tooltip {
  position-area: bottom center;  /* 현재 표준 */
  inset-area: bottom center;     /* 구형 브라우저 호환용 */
}

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

  • Chrome 125+: 완전 지원
  • Edge 125+: 완전 지원
  • Firefox 134+: 완전 지원 (2025년 1월)
  • Safari 18.4+: 부분 지원, position-try-fallbacks 일부 미지원

2026년 기준으로 Baseline 2025에 포함되어 대부분의 최신 브라우저에서 사용 가능합니다. Safari의 일부 기능 미지원이 있으나 기본적인 앵커 배치는 안정적으로 동작합니다.

실전 적용 체크리스트

  • 앵커 이름은 --로 시작하는 커스텀 프로퍼티 형식을 사용합니다
  • 배치 요소는 반드시 position: absolute 또는 position: fixed여야 합니다
  • position-try-fallbacks로 뷰포트 경계 처리를 반드시 추가하세요
  • Popover API와 조합 시 popovertarget 속성으로 JavaScript 없이 토글 가능합니다
  • Safari 호환이 필요하면 @supports (position-area: top)로 조건부 적용을 권장합니다