iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
CSS Anchor Positioning lets an absolutely or fixed-positioned element derive its placement—and, optionally, its size—from another element, so a tooltip or popover can stay tethered to its trigger without script-maintained coordinate calculations. The basic pattern is to name the trigger with anchor-name, associate the positioned element with position-anchor, and place it with position-area or anchor(). This solves layout, not the UI’s semantics, focus handling, or open-and-close behavior.
How the anchor relationship works
An anchor is the reference element, such as a button. An anchor-positioned element is the absolutely or fixed-positioned element whose location or size is derived from that reference. For an explicit named relationship, set anchor-name on the reference and the matching position-anchor on the positioned element. Then specify where it belongs.
As Una Kravets puts it in the Chrome for Developers guide, “The CSS Anchor Positioning API lets you position elements relative to other elements, known as anchors.” The feature is useful for tethered tooltips and infoboxes, form-error messages, settings dialogs, and dropdown menus; it does not automatically implement the behavior or accessibility of those patterns. See MDN’s CSS anchor positioning overview.
Build a simple tooltip
This example explicitly associates a button and tooltip, then places the tooltip above the button:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<button class="help-trigger" aria-describedby="help-tip">Help</button>
<div class="help-tip" id="help-tip" role="tooltip">
Enter the code shown on your statement.
</div>.help-trigger {
anchor-name: --help-trigger;
}
.help-tip {
position: absolute;
position-anchor: --help-trigger;
position-area: top;
margin: 0;
}anchor-name declares the named anchor; the matching position-anchor associates the positioned element with it. position-area: top places the tooltip on the anchor’s top side. The HTML attributes here are one semantic choice, not semantics supplied by CSS; choose and verify the relationship and interaction for the actual component. For a full guide to the positioning features, see MDN’s Using CSS anchor positioning.
Use inset values when you need more direct control
You can place an element using an inset property and the anchor() function instead:
.help-tip {
position: absolute;
position-anchor: --help-trigger;
top: anchor(bottom);
left: anchor(left);
margin: 0;
}Here, top: anchor(bottom) aligns the tooltip’s top inset with the anchor’s bottom side, and left: anchor(left) aligns it on the horizontal axis. The anchor side must match the inset axis: top: anchor(left) is incompatible. anchor() accepts an optional fallback length or percentage if its anchor value is invalid; add a gap with a calculation such as top: calc(anchor(bottom) + 0.5rem). It is an inset-value function for absolutely or fixed-positioned elements. Details are in MDN’s anchor() reference.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Check default insets and margins
When using browser popovers, inspect their default styles before troubleshooting placement. MDN warns that default margins and insets can conflict with the desired anchor position; resetting them may be necessary, for example with margin: 0; inset: auto;. Apply resets appropriate to the component rather than assuming its defaults are neutral.
Handle viewport edges with fallback placements
A tooltip that fits above its trigger in one part of the page may run offscreen when the trigger approaches a viewport edge. position-try-fallbacks lets you provide alternative placements for the browser to try, in order. For a simple top-or-bottom choice, use a block-axis flip:
.help-tip {
position: absolute;
position-anchor: --help-trigger;
position-area: top;
position-try-fallbacks: flip-block;
margin: 0;
}The browser tries the fallback when the initial placement overflows. If none of the supplied alternatives prevents overflow, the element returns to its initial position, which may still overflow. The fallback mechanism is not a guarantee that content will always fit. You can provide inline flips, combined tactics, alternative position-area values, or custom alternatives declared with @position-try. For content that should disappear when it or its anchor is offscreen, consider position-visibility instead. MDN documents these options in Fallback options and conditional hiding for overflow.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Keep an arrow aligned after a flip
If a tooltip has an arrow, its direction may need to change when the tooltip moves to a fallback side. MDN describes anchored container queries as a way to style descendants according to the active fallback option. This is an optional refinement; first make sure the placement alternatives work for the tooltip itself.
Recommended Free Tools
Prevent association bugs in repeated components
position-anchor selects the default anchor used by position-area, position-try, anchor(), and anchor-size() when those features do not name an anchor directly. Naming an anchor inside anchor() can target it for that function, but does not by itself establish the positioned element’s association; use position-anchor or the applicable association mechanism as well.
If several anchors share the same name, the last matching anchor in source order is selected. Repeated components can therefore attach to an unintended instance unless names are unique or appropriately scoped. The MDN position-anchor reference covers the property and its association behavior.
Beyond placement, anchor-size() can derive an element’s size from an anchor, and different inset properties can refer to multiple named anchors. These are useful extensions, but the positioned element still has one default associated anchor for behaviors such as scrolling with its anchor and conditional hiding.
Choose the right combination of CSS and native UI behavior
Anchor Positioning controls where content sits; it does not decide when a tooltip, menu, or dialog opens, how it closes, what keyboard behavior it needs, or how assistive technology should understand it. Select semantics and interaction behavior for the specific pattern.
Free tools Windows power users keep installed
One-click scans. No signup required.
- For a tooltip, implement the appropriate accessible relationship and show-and-hide behavior; positioning alone does not make a tooltip.
- For a popover or dialog, consider combining anchor positioning with the Popover API or a
<dialog>. The Chrome guide notes that native popover or dialog behavior can let the browser handle focus-navigation corrections even when content is elsewhere in DOM order. - When a semantic relationship between the anchor and positioned content is needed, the Chrome guide suggests considering
aria-details. Choose the relationship that fits the component rather than treating any one attribute as a universal fix.
As you choose an implementation, check support in the target browsers, the complexity of placement and overflow, whether content should flip, resize, or hide, and whether native popover or dialog behavior can cover focus needs. There is no single approach that is best for every interface.
Best Value
Check browser support and provide a fallback
In the MDN references checked for this article, anchor() is labeled Baseline 2026, with broad availability across current devices and browser versions since January 2026; position-anchor is labeled newly available since September 2026. Those labels are availability signals, not a guarantee that every browser version supports every property, value, fallback, or sizing feature identically. Older browsers may lack support, and MDN notes variation for parts of anchor(). Check compatibility for the specific features you use and test your target browser range.
A feature query can guard anchor-positioning styles:
@supports (anchor-name: --myanchor) {
/* Anchor-positioning styles */
}This tests support for the declaration shown; it does not establish support for every advanced fallback or sizing feature inside the block. Keep an appropriate conventional positioning fallback when the supported browser range requires one. The Chrome for Developers guide also mentions an OddBird polyfill for older browser versions, but describes it as incomplete and using outdated syntax. Review its current maintenance and compatibility before relying on it; do not assume it matches native browser behavior.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
