CSS Anchor Positioning là gì?

CSS Anchor Positioning cho phép định vị một element tương đối so với một element khác (anchor) mà không cần JavaScript. Giải quyết vấn đề tooltip/popover cần tính toán tọa độ bằng JS.

Cách dùng:

/* Anchor element */
.trigger { anchor-name: --my-anchor; }

/* Positioned element */
.tooltip {
  position-anchor: --my-anchor;
  position: absolute;
  position-area: top;
}

Dùng @position-try để khai báo fallback khi không đủ không gian.

• Browser support: Chrome 125+, chưa có Firefox.
• Dùng cho tooltips, popovers, dropdown menus.