⚓
CSS Anchor Positioning
JS 없이 요소를 다른 요소에 앵커 고정
툴팁, 팝오버, 드롭다운 메뉴 등의 UI 요소를 트리거 요소에 정확하게 위치시키는 것은 Popper.js 같은 JavaScript 라이브러리에 의존했었습니다. CSS Anchor Positioning은 anchor-name으로 기준 요소를 지정하고, position-anchor와 anchor() 함수로 상대 위치를 계산합니다.
뷰포트 경계를 벗어나는 경우 position-try 폴백으로 자동 재배치까지 처리할 수 있어, 복잡한 JavaScript 위치 계산 코드를 대체합니다.
적용 방법
1
기준 요소에 anchor-name: --trigger를 선언한다
2
위치시킬 요소에 position-anchor: --trigger를 지정한다
3
anchor() 함수로 top, left 등의 위치를 계산한다
4
position-try로 뷰포트 밖 폴백 위치를 정의한다
장점
- ✓ JavaScript 위치 계산 라이브러리(Popper.js 등)가 불필요해진다
- ✓ 뷰포트 경계 폴백을 CSS만으로 처리할 수 있다
단점
- ✗ 아직 Chromium 기반 브라우저에서만 완전 지원된다
- ✗ 복잡한 앵커 관계는 디버깅이 까다로울 수 있다
사용 사례
폼 필드 옆에 표시되는 유효성 검사 툴팁
버튼 클릭 시 나타나는 컨텍스트 메뉴의 위치 자동 결정