Anchor Positioning

Anchor positioning allows one element to be anchored to another element and is extremely useful when using popovers.

Popover recap

Popovers are an extremely easy way to make an hidden element appear when a button is clicked. It works without JavaScript or even CSS and uses just a couple of HTML attributes: popover and popover-target.

To create a popover you have the HTML element you which to hide and appear and a corresponding button. The HTML element has an ID and the popover attribute. The button has a popover-target attribute pointing the the HTML element.

<div id="fish" popover>Some popover text to be revealed</div>

<button popover-target="fish">Show me the fish</button>

As great as this is the main shortcoming is that the popovers appear dead centre in the viewport. You can change this in the CSS but where to position it? This is where anchor positioning comes in.

Basic use

Anchor positioning allows you to position your popover element right next to the button, or any other HTML element you choose.

The key thing to establish is the anchor. This is the element which doesn’t move. In the above description this would be the button element. Give this element an anchor name:

button {
    anchor-name: --my-button;
}

Next we link that to the HTML element with position-anchor and then say where we want the positioned element to be with position-area:

#fish {
    position-anchor: --my-button;
    position-area: bottom center;
}

Precise positioning can be refined further by using standard CSS like margin values.

More

There is more to anchor positioning such as allowing the anchor position to flip for different viewport sizes.

See the excellent CSS Anchor Positioning Guide on CSS Tricks.