Basic Anchor Positioning

The CSS anchor positioning module defines features that allow you to tether elements together. Elements can be defined as anchor elements and anchor-positioned elements. Anchor-positioned elements can be bound to anchor elements. The anchor-positioned elements can then have their size and position set relative to the size and location of the anchor elements to which they are bound.

– MDN Documents: Using CSS anchor positioning

Here for demonstration purpose, I have created a HTML document with a draggable area with a button that will trigger a popover menu. The popover menu will later be positioned relative to the button.

2025-11-19T090607

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<html>
<body>
	<div id="menu-btn-container">
        ✥ Draggable Menu Button Container: <button id="menu-btn" popovertarget="menu">Toggle Menu</button>
    </div>
    <div id="menu" popover>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#faq">FAQ</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#blog">Blog</a></li>
            <li><a href="#settings">Settings</a></li>
        </ul>
    </div>
    <!-- ENERIC STYLING TO MAKE BUTTON/MENU LOOK BETTER -->
    <style>
        ...
    </style>
    <!-- CODE TO MAKE BUTTON CONTAINER MOVABLE ON MOUSE DRAG -->
    <script> 
        ...
    </script>
</body>
</html>

(source code: 1-without-anchor-position.html)

Position Element Relative to Their Anchor

If you have done absolute position in the past you will know that by setting an element to be position:absolute and its parent to position:relative, the top/left/right/bottom of the element will be relative to the parent’s positioning.

Similarly, to associate the position of an element with an anchor, we first declare the anchor via anchor-name and position-anchor:

1
2
3
4
5
6
7

.anchor {
    position: absolute;
    anchor-name: --my-anchor-name;
}
.target{
	position-anchor: --my-anchor-name;
}

Note that:

  1. in order for anchor-position to work, element has to be position:fixed or position:absolute
  2. here we use -- in the anchor name to avoid collision with CSS native keywords (it may look alike a CSS variable, but it is NOT a variable !!!!)
  3. an implicit anchor reference might be made (by default) between two element in some cases (e.g. the <select> element and its drop-down picker)

Option-1: Position using anchor() function

CSS anchor positioning changes this paradigm, enabling anchor-positioned elements to be placed relative to the edges of their associated anchor(s). The module defines the anchor() function, which is a valid value for each of the inset properties.

When used, the function sets the inset position value (left/right/top/bottom/inset) as an absolute distance relative to the anchor element by defining the anchor element, the side of the anchor element the positioned element is being positioned relative to, and the distance from that side.

– MDN Document: Using inset properties with anchor () function values

2025-11-19T092137

(source code: 2-anchor-position-based-on-anchor-function.html)

Option-2: Position using position-area property

The position-area property provides an alternative to the anchor() function for positioning elements relative to anchors. The position-area property works on the concept of a 3x3 grid of tiles, with the anchor element being the center tile. The position-area property can be used to position the anchor positioned element in any of the nine tiles, or have it span across two or three tiles.

– MDN Documents: Setting a position-area

2025-11-19T093031

(source code: 3-anchor-position-based-on-anchor-area.html)

Anchor Position Fallback (Alternative Position)

CSS anchor positioning also provides CSS-only mechanisms for specifying multiple alternative positions for an anchor-positioned element. For example, if a tooltip is anchored to a form field but the tooltip would otherwise be rendered offscreen in its default position settings, the browser can try rendering it in a different suggested position so it is placed onscreen, or, alternatively, hide it altogether if desired.

– MDN Documents: Fallback options and conditional hiding for overflow

(*You can either use anchor() function or anchor-area in the fallback position options)

2025-11-19T093546

(source code: 4-anchor-position-fallbacks.html)

Reference