Navigating the seas of web development, the CSS Anchor Positioning API has emerged as a foundational tool, enabling developers to anchor elements precisely relative to others. This technique simplifies the placement of interface elements directly within the browser—such as error messages next to input fields, tooltips for additional information, dropdown menus, and more within the browser.
This blog post explores key concepts such as anchor elements and anchor-positioned elements, demonstrating how to set up relationships between elements, utilize the anchor() function for positioning, and leverage the new anchor-center value for effortless centering. Advanced techniques like multiple anchors, the position-area property, the anchor-size() function, and visibility options are also covered.
By leveraging CSS anchor positioning, developers streamline implementations, reduce dependency on third-party libraries, and unleash untapped creativity in the browser. Let’s jump in –
Concepts: Anchor Elements and Anchor-Positioned Elements
At the heart of the CSS anchor positioning API lies the relationship between anchor-elements and anchor-positioned elements. An anchor element serves as a reference point, enabling anchor-positioned elements to adjust their position and size relative to the linked anchor element.
Drop Your Anchor and Let’s Get Started
Setting up the relationship between elements is a breeze. An anchor element just needs to declare its anchor-name, which should be unique formatted as a dashed-indent. It’s like giving your element its own stylish reference tag!
.anchor-element {
anchor-name: --anchor-element;
}
Now, for the positioned element, it’s like baking a cake—mix in some absolute or fixed positioning and don’t forget to specify which anchor-element it’s tied to using position-anchor.
.anchor-positioned-element {
position: absolute;
position-anchor: --anchor-element;
}
But wait, simply associating elements won’t magically connect them! To get them talking and aligning just right, we introduce the anchor() function in CSS positioning. For example, imagine aligning the bottom-right corner of your positioned element with the top-left corner of the anchor element—voilà!
.anchor-positioned-element {
position: absolute;
bottom: anchor(top);
right: anchor(left);
position-anchor: --anchor-element;
}
The anchor() function isn’t just for show—it’s how you tell your positioned element where to go relative to its anchor buddy. Want more flexibility? Cue the explicit anchor, where you define both the anchor-name and the edge to position to, making sure your elements dance together flawlessly:
.anchor-positioned-element {
position: absolute;
bottom: anchor(--anchor-element top);
right: anchor(--anchor-element left);;
}
Effortless Centering
While adjusting the anchor() arguments can achieve precise positioning, sometimes simplicity is key—especially when all you need is to center elements effortlessly. Introducing the new anchor-center value! This nifty addition works seamlessly with properties like justify-self, align-self, justify-items, and align-items.
For instance, to position the element above and horizontally aligned with the anchor element, just sprinkle in some anchor-center magic:
.anchor-positioned-element {
position: absolute;
top: anchor(--anchor-element bottom);
justify-self: anchor-center;
position-anchor: --anchor-element;
}
Multiple Anchors
As hinted earlier, the positioned element can reference more than one anchor element, allowing it to tether multiple edges to different anchor element edges using the anchor()function. This flexibility enables precise positioning across various scenarios. Below, we illustrate how two corners of a positioned element can be tethered to distinct anchor elements by explicitly specifying each anchor name:
.anchor-element:nth-of-type(1) {
anchor-name: --anchor-element-one;
}
.anchor-element:nth-of-type(2) {
anchor-name: --anchor-element-two;
}
.anchor-positioned-element {
position: absolute;
top: anchor(--anchor-element-one bottom);
left: anchor(--anchor-element-one right);
right: anchor(--anchor-element-two left);
bottom: anchor(--anchor-element-two top);
}
With the positioned element tethered to these two anchor elements, it dynamically adjusts as the window resizes or as you move the anchors. It expands and contracts smoothly without needing a single line of JavaScript. Give it a try and see how seamlessly it adapts!
Enhanced Positioning: Exploring Position-Area
Up until now, the positioned element has been anchored using absolute positioning with the anchor() function. With the CSS Anchor Positioning API, a new approach is introduced through the position-area property. This property offers an alternative method for positioning elements, diverging from traditional absolute positioning.
The position-area property allows elements to be positioned relative to a 3×3 grid of tiles, with the anchor element placed at the center. This grid enables precise positioning, allowing elements to align with individual tiles or span across multiple tiles (such as 2×2 or 2×3 configurations). Below, you can experiment with different position-area positions using the interactive playground:
Navigating Sizes: The Anchor-Size() Approach
Another valuable feature introduced by the CSS anchor positioning API is the anchor-size() function. Similar to the anchor() function, anchor-size() also returns a length value, but it serves a distinct purpose in sizing rather than positioning. Instead of linking to an anchor element’s relative position, anchor-size() function allows you to link to its relative size.
The anchor-size() function accepts an optional anchor name if not implicitly set, or if different anchor elements are to be referenced. The subsequent argument specifies the anchor size, including options such as width, height, block, or inline sizes.
For example, to synchronize the height of a positioned element with that of its anchor element, you can use the following CSS:
.anchor-positioned-element {
height: anchor-size(height)
}
Moreover, because anchor-size() returns a valid length value, it can be combined with the calc() function to establish proportional relationships. For instance, to scale the height of the positioned element to one and a half times the height of its anchor element, the CSS would look like this:
.anchor-positioned-element {
height: calc(anchor-size(height) * 1.5);
}
To further illustrate this concept, the example below provides an interactive sandbox where you can observe firsthand how adjustments to the anchor element’s size affect the positioned element’s height:
Exploring Overflow Management: Try Fallbacks and Seamless Hiding
As with all positioned elements, it’s crucial that those elements display in an accessible place for a user to interact with, regardless of their anchor position, or at least hide if not accessible.
Try Fallbacks
The positioned-element allows for its position-try-fallbacks property to set one to many alternative positions to try to avoid the positioned element from being in an undesired position based on its overflow. The predefined values of: flip-block, flip-inline, and flip-start. By combining some of these values, we can concisely position the element and provide multiple other positions to try.
.anchor-positioned-element {
position-try-fallbacks: flip-block,flip-inline, flip-block flip-inline;
}
Using the above, as the anchor-element is moved within the viewport, the positioned-element will try flip-block followed by flip-inline and finally try to combine the two previous. In the demo below, as you drag the anchor-element around towards the viewport edges, it should try various options.
Visibility
Situations may arise that may require the positioned-element to be hidden; you may want to hide an anchor-positioned element if its anchor-element is clipped by the edge of the viewport. The position-visibility property helps you set rules for hiding these elements.
By default, the positioned element is always shown. Using no-overflow hides the element if it overflows its container or the viewport.
Using anchors-visible hides the element if its anchor is fully hidden due to overflow or being covered by other elements. The positioned element stays visible as long as any part of the anchor is still visible.
Below, the example illustrates how each one of these position-visibility properties affects the tooltip as it’s scrolled. When no-overflow is selected, the tooltip will be hidden when any part of it crosses the viewport edge. Selecting anchors-visible keeps the positioned element visible until its anchor-element has completely left the viewport. Note, for this option, the anchor-element is actually the anchor element’s :before pseudo-element, allowing it to track the top as it goes off-screen instead of the entire element.
