CSS Anchor Positioning이란

CSS Anchor Positioning은 한 요소를 다른 요소에 상대적으로 배치하는 CSS 표준 기능입니다. 기존에 JavaScript로 계산하던 툴팁, 드롭다운, 팝업의 위치를 순수 CSS만으로 처리할 수 있습니다. Chrome 125+, Edge 125+에서 지원합니다.

Anchor 기본 사용법

anchor-name으로 앵커 지정

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

/* 2. 타겟 요소를 앵커에 연결 */
.tooltip {
  position: fixed;
  position-anchor: --my-anchor;

  /* anchor() 함수로 위치 계산 */
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}

HTML 구조

<button class="trigger-button">호버하세요</button>
<div class="tooltip">이것은 툴팁입니다</div>

anchor() 함수 상세

anchor() 함수는 앵커 요소의 위치값을 반환합니다.

.dropdown-menu {
  position: fixed;
  position-anchor: --menu-trigger;

  /* 앵커의 하단에 배치 */
  top: anchor(bottom);
  /* 앵커의 좌측에 정렬 */
  left: anchor(left);

  /* 앵커 너비에 맞추기 */
  width: anchor-size(width);

  /* 앵커와 8px 간격 */
  margin-top: 8px;
}

anchor-size() 함수

/* 앵커 크기 기반 레이아웃 */
.popover-panel {
  position: fixed;
  position-anchor: --card;

  /* 앵커 너비의 2배로 설정 */
  width: calc(anchor-size(width) * 2);
  /* 최소 앵커 높이만큼 확보 */
  min-height: anchor-size(height);
}

position-try-fallbacks - 자동 위치 조정

화면 밖으로 나가는 경우 자동으로 대체 위치를 시도합니다.

/* 내장 키워드 사용 */
.tooltip {
  position: fixed;
  position-anchor: --btn;
  top: anchor(bottom);
  left: anchor(center);

  /* 아래 공간 부족 시 위로, 좌우로 자동 전환 */
  position-try-fallbacks:
    flip-block,     /* 상하 반전 */
    flip-inline,    /* 좌우 반전 */
    flip-block flip-inline;  /* 양쪽 반전 */
}

/* 커스텀 위치 전략 */
@position-try --top-center {
  bottom: anchor(top);
  left: anchor(center);
  translate: -50% 0;
  margin-bottom: 8px;
}

@position-try --right-center {
  left: anchor(right);
  top: anchor(center);
  translate: 0 -50%;
  margin-left: 8px;
}

.smart-tooltip {
  position: fixed;
  position-anchor: --target;
  top: anchor(bottom);
  left: anchor(center);
  position-try-fallbacks: --top-center, --right-center;
}

Popover API

HTML popover 속성으로 JavaScript 없이 팝오버를 만들 수 있습니다. 모든 최신 브라우저에서 지원합니다.

기본 사용법

<!-- auto: 바깥 클릭 시 자동 닫힘 -->
<button popovertarget="menu">메뉴 열기</button>
<div id="menu" popover="auto">
  <nav>
    <a href="/home">홈</a>
    <a href="/about">소개</a>
    <a href="/contact">연락처</a>
  </nav>
</div>

<!-- manual: 명시적으로만 닫힘 -->
<button popovertarget="notice">공지 보기</button>
<div id="notice" popover="manual">
  <p>서비스 점검 안내</p>
  <button popovertarget="notice" popovertargetaction="hide">닫기</button>
</div>

CSS 스타일링

/* 팝오버 기본 스타일 */
[popover] {
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

/* ::backdrop 스타일링 */
[popover]::backdrop {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
}

/* 진입/종료 애니메이션 */
[popover] {
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity 200ms ease,
    transform 200ms ease,
    overlay 200ms ease allow-discrete,
    display 200ms ease allow-discrete;
}

[popover]:popover-open {
  opacity: 1;
  transform: scale(1);
}

@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scale(0.95);
  }
}

Anchor + Popover 조합

<button class="anchor-btn" popovertarget="info-panel">
  상세 정보
</button>
<div id="info-panel" popover="auto" class="anchored-popover">
  <h3>제품 상세</h3>
  <p>가격: 29,000원</p>
</div>

<style>
.anchor-btn { anchor-name: --info-trigger; }
.anchored-popover {
  position: fixed;
  position-anchor: --info-trigger;
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
  margin-top: 8px;
  position-try-fallbacks: flip-block;
}
</style>

핵심 정리

• CSS Anchor Positioning으로 JS 없이 상대 위치 배치
• anchor() 함수로 앵커 요소의 좌표를 참조
• position-try-fallbacks로 화면 밖 방지 자동 전환
• Popover API로 HTML만으로 팝오버 구현
• 두 기능을 조합하면 완전한 CSS-only 드롭다운/툴팁 구현 가능