Until recently, positioning of any element, whether a tooltip, a dropdown, or a popover, in relation to another element on your website required using external JavaScript libraries, such as Popper.js or Floating UI. Calculation of offsets, collision avoidance, and synchronization of scroll positions and resize were common challenges.
CSS Anchor Positioning solves the challenge by allowing you to place one element relative to another "anchor" element, purely through CSS. Forget about using JavaScript or any other external libraries – all the work will be done with the help of CSS only.
In this article, we discuss what CSS Anchor Positioning is, how it is accomplished, which new properties and functions have been introduced, and how you can use CSS Anchor Positioning today.
CSS Anchor Positioning – What Is It?
Basically, CSS Anchor Positioning means being able to:
Specify any element as an anchor with an anchor name. Set positions based on the named anchor and using the coordinates of the top, bottom, left, right, and center edges in CSS directly. Determine fallback positions to ensure that the positioned element relocates automatically if it overflows the browser window.
This functionality used to be impossible without writing code to calculate the getBoundingClientRect() values, respond to scroll and resize events, and then apply style changes programmatically via JS.
**Here's a simple example demonstrating CSS Anchor Positioning
:**
<button class="anchor-btn">Hover me</button>
<div class="tooltip">I'm anchored to the button!</div>
---
.anchor-btn {
anchor-name: --my-button;
}
.tooltip {
position: absolute;
position-anchor: --my-button;
top: anchor(--my-button bottom);
left: anchor(--my-button center);
translate: -50% 8px;
background: #222;
color: #fff;
padding: 6px 12px;
border-radius: 6px;
font-size: 14px;
}Use Case Examples
**Tooltips **– Hints that can be shown based on icons or text Dropdowns – Menus shown below or adjacent to a trigger button Custom Select Boxes – Option list elements aligned in width with their triggers Contextual Menus – Right-click menus that appear based on the cursor location or a target Notification Badges – Badges that are shown next to an icon Comboboxes / Autocomplete – Suggestion lists that appear below an input field
Browser Support
Currently, in June 2026, CSS Anchor Positioning works well in Chrome and Edge (both Chromium-based browsers that implemented it starting from version 125). Progress is being made in Firefox and Safari implementations. However, you should always check caniuse.com/css-anchor-positioning to ensure compatibility with your browser of choice.
At this point, a practical strategy would be to:
Use CSS Anchor Positioning as a progressive enhancement. Implement a JavaScript solution (or fallback static design) for older browsers. Apply @supports CSS at-rule to style anchor positioning:
@supports (anchor-name: --test) {
.tooltip {
position-anchor: --info-icon;
top: anchor(--info-icon bottom);
}
}Conclusion
The advent of CSS Anchor Positioning marks a paradigm change in the way we construct interactive UI elements online. The complex tasks of implementing JavaScript-powered interactions — such as tooltips, drop-downs, popovers, or context menus which are capable of positioning and repositioning themselves according to the user’s input — can now be done simply through declarative CSS code.
Although cross-browser compatibility is not yet fully achieved, it's worth exploring this CSS feature right now, particularly for sites built with modern Chromium engines. It is expected that in the coming years it will be implemented in all browsers, making the use of such features much easier without the need for external libraries.
If you're creating a component library or design system, it might be worth considering implementing this CSS feature through a @supports query in the near future.
Was this article helpful?