CSS Anchor Positioning — ยึด element กับ element อื่น

CSS Anchor Positioning (anchor(), position-anchor) ให้ positioned element ยึดกับ element อื่นได้โดยไม่ต้องใช้ JavaScript — เหมาะสำหรับ tooltip, popover, dropdown

/* กำหนด anchor */
.trigger {
  anchor-name: --my-button;
}

/* ยึด tooltip กับ anchor */
.tooltip {
  position: absolute;
  position-anchor: --my-button;

  /* วางไว้เหนือ anchor */
  bottom: anchor(top);
  left: anchor(center);
  translate: -50% 0;
}

@position-try — fallback ถ้า tooltip ออกนอก viewport:

.tooltip {
  position-try-fallbacks: flip-block, flip-inline;
}

Browser จะลอง placement อื่นอัตโนมัติถ้า preferred position ออกนอกจอ — แก้ปัญหา tooltip ถูกตัดที่ edge โดยไม่ต้องเขียน JS

Browser support: Chrome 125+, แต่ยังไม่มีใน Firefox/Safari — ต้องมี fallback สำหรับ production ในตอนนี้