Contents
see ListCSS 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)로 조건부 적용을 권장합니다