CSS Anchor Positioning — 요소 간 위치 지정의 혁신

Anchor Positioning이란

다른 요소를 기준으로 상대적 위치를 지정합니다. 툴팁, 드롭다운, 팝오버에 유용합니다.

기본 사용법

.trigger {
  anchor-name: --my-anchor;
}

.tooltip {
  position: fixed;
  position-anchor: --my-anchor;
  top: anchor(bottom);
  left: anchor(center);
  
  /* 화면 밖으로 나갈 때 자동 조정 */
  position-try-fallbacks:
    --top, --left, --right;
}

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

JavaScript 없이 순수 CSS만으로 위치 계산이 가능합니다.