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.

CSS Anchor Positioning lets you position one element relative to another (the anchor) without JavaScript — solving the tooltip/popover coordinate calculation problem.

Basic usage:

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

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

Use @position-try to declare fallback positions when there's not enough space.

• Browser support: Chrome 125+, not yet in Firefox.
• Used for tooltips, popovers, and dropdown menus.