CSSAnchor Positioning cho phép định vị một element bám theo element khác, không cần JavaScript đo toạ độ.
css
.trigger { anchor-name: --menu-btn; }
.dropdown {
position: absolute;
position-anchor: --menu-btn;
position-area: block-end span-inline-start; /* đặt bên dưới, canh mép trái */
margin-block-start: 8px;
position-try-fallbacks: --flip-to-top; /* hết chỗ thì thử phương án khác */
}
@position-try --flip-to-top {
position-area: block-start span-inline-start;
margin-block: 0 8px;
}Vấn đề nó giải: tooltip, popover, dropdown xưa nay phải dùng JS (Popper.js, Floating UI) để đo getBoundingClientRect() của trigger, tính chỗ đặt, rồi lật hướng khi chạm mép màn hình — và tính lại mỗi lần cuộn hoặc resize.
Điểm mạnh nhất là @position-try: lật hướng tự động khi không đủ chỗ, việc mà trước đây tốn nhiều code nhất.
Hỗ trợ: Chrome 125+, Firefox và Safari chưa có (tính tới 2026) — nên hiện vẫn cần dự phòng bằng thư viện.
Chốt: đi cùng Popover API, cặp này thay được gần hết công việc của một thư viện floating element. Đây là câu hỏi thăm dò xem ứng viên có theo dõi CSS đang đi về đâu hay không.