Q41: What is CSS Anchor Positioning and how does it position floating nodes?
CSS Anchor Positioning allows positioning floating elements (tooltips, dropdown menus) relative to explicit target anchor nodes anywhere on screen using anchor-name and position-anchor, without requiring JavaScript DOM geometry calculations.
Anchoring Tooltip to Target Button
/* Target anchor button */
.anchor-button {
anchor-name: --my-anchor;
}
/* Floating tooltip element */
.tooltip {
position: absolute;
position-anchor: --my-anchor;
top: anchor(bottom);
left: anchor(center);
}💡 The tooltip anchors its position directly to the bottom-center coordinates of --my-anchor button.
Key Takeaways
- Anchors floating tooltips/menus relative to specific target elements.
- Eliminates complex JavaScript DOM positioning library dependencies.
Knowledge Check
Which property defines an anchor name reference on a target anchor element?