96: CSS Anchor Positioning  🔗 **Source:** [96: CSS Anchor Positioning](https://www.youtube.com/watch?v=_TwxnaeUWl4) [00:00:05] [music] >> Welcome back to the CSS podcast. This season is all about the latest and greatest in the CSS and UI world, a landscape that is evolving at a record pace. I'm your co-host Una. >> And my name is Breus. >> And today's episode is all about anchor positioning. For years we've been reaching for JavaScript to handle things like tooltips, popovers, and menus that need to be dynamically positioned relative to other elements. But what if I told you that you could do it all and more directly in CSS? >> Crazy, right? So a CSS anchor positioning landed in Chrome 125 and Safari 26, and it's part of Interop [00:00:50] 2025. So we anticipate cross-browser support by the end of the year. This API allows you to tether elements together, creating a relationship between an anchor element and a positioned element. This means no more complex calculations or third-party libraries for many of these common UI patterns. >> Imagine this classic scenario. You have a button like a button in an action bar, and it might be an icon button, so it's not entirely clear what it does. So you want to make a tooltip appear above it or below it that describes the action or gives the user some more context. You'd use position absolute on the tooltip and position relative on the button's container. But then what happens when the button is near the top of the screen [00:01:33] if you had a position at the top? The tooltip will get cut off. So you'd have to write some JavaScript to detect the viewport and detect the intersection observer and measure the element's position and flip it or move the tooltip to appear below the button instead. >> Wow, and that's a lot of work for a seemingly simple task. Now anchor positioning takes all that logic and puts it right into the browser's CSS engine. It handles the initial positioning and even the repositioning logic for you. >> So, let's get into how this new CSS API actually works. >> Yeah, so it all starts with defining an anchor. You can make any element an anchor with the anchor name CSS property. So, that's anchor-name. And you give it a value that is set to a [00:02:16] dashed identifier. If you're not familiar with it, a dashed identifier looks like a CSS property because it has two dashes in front of it, but actually it's just a name. So, for example, you could use --my-anchor. So, if you have a button somewhere, you target it through selector, for example, .my-button, and then you give the anchor name property the value of --my-anchor to make it an anchor. And once you have that anchor in place, then you can tell your positioned element, for example, a tooltip, to use it. And for that, you have the position anchor property. So, in your CSS, you target your tooltip using the selector that you want, .my-tooltip, for example. You give it a position absolute, but then you also, in [00:02:59] addition to that, say position-anchor, and then the name of the anchor you want to refer to. So, that was --my-anchor. And also, if you have a popover and an invoking element, you can actually skip this step because the popover relationship creates an implicit anchor. So, you don't need to explicitly link the two together with anchor name and position anchor. >> Now, the positioning logic happens with the anchor function. You can use this inside your inset properties like top, right, bottom, and left to position the tooltip relative to the anchor. So, if you want the bottom of your tooltip to be at the top of your anchor, you'd write bottom, and then colon anchor, and then in parentheses, top. That's saying the bottom property with the value of [00:03:41] the anchor function, which has the value of top inside of it. This would make it appear above the anchor. If you want it to appear to the right of the anchor, you would write left colon anchor, right. And this positions the positioned element or the tooltip by its left edge touching the right edge of the anchor. So, it really does read very English when you think about it. It's like how you're positioning one edge to the other. But, you can also use logical properties, which we're big fans of on this show. And if you see us talking at these examples in non-logical terms, it's just because it's easier to talk about it that way in podcast format saying right instead of inline end, but you can use all of those logical [00:04:23] properties. And you likely want to if you have a multi-lingual UI. >> And alternatively, you can also use position area, which is a super cool shorthand that creates a 3x3 grid around your anchor. And you can place your positioned element in any of those nine cells. So, for example, you can use position area, colon, top space center. And that will put your element right above the anchor in the center cell. And position area does something special because it creates an inset modified containing block or IMCB for short that surrounds the anchor for you to place the positioned element within. >> Position area top center is also different from position area top, even [00:05:06] though they would both be positioning the element above the anchor. Top center tells the browser to put it in the center cell, like Rama said, where top alone lets it span all of the columns. If you wanted the positioned element to start in the center and span to the left, so it would take up the first two cells, the syntax is position area top span-left. Using the span syntax is how you could span left, right, inline start, inline end, block start, block end. And this might be a little bit easier for you to see yourself, so I built a handy tool for you to give it a go at anchor-tool.com. And we'll link that in the show notes. And we're also working on improving our dev tools for anchor positioning in [00:05:49] Chrome as right now they're still lacking a couple of features. >> So, those are the basics of initial positioning with the anchor function or position area. Now, let's talk about repositioning to ensure an optimal in-view UI. And this is where anchor positioning really shines because you can define fallback positions very quickly and easily. If the browser detects that your preferred position will cause an overflow or for positioned elements to move outside of the viewport, it can try other positions. And these positions are called position try fallbacks. So, that's position-try-fallbacks. That's also the name of the CSS property that you use on the absolutely positioned element. So, you have your my [00:06:32] tooltip set with position absolute declared on it with position anchor tethered to your -- -- my anchor and then for example, position area top. Well, in addition to that, you can add a declaration position-try-fallbacks and you can give it the values that you want. And here for example, let's use flip-block, {comma} flip-inline. >> Flip-block and flip-inline are both browser-provided defaults, which do what they sound like they do. They flip the position element in the block up and down or inline left and right directions. And these are super useful defaults that cover most use cases. But if you need more complex styling to reposition your element, you can write your own fallbacks. And you can do this with the @position-try [00:07:17] at rule. That's @position-try with a dash in between. An example of where you might need this is if you have an anchored menu with a submenu. So, imagine that the submenu might initially appear to the right of the original menu, like position area right span bottom. But if there isn't enough horizontal space in your UI, like on more narrow screens, you might want to shift it to appear below. So, using defaults for flipping wouldn't work in this case. You don't want it to flip inline and block doesn't make sense either, but you can write a position try rule like this. So, you'd write at position {dash} try and then you'd give it a name, which is a custom identifier, like {dash} {dash} bottom, and then you have your open curly braces, and then in there you'd write the logic. You'd write [00:08:01] position area bottom. So, we're moving it from position area right span bottom, just putting it below the other menu. And you can do more than reposition it. You can also do things like adjust the margins. So, if you had margins that set it away from the menu to the right, you can now reposition the margins and have them styled how would make sense from the bottom. Then you would call your name position inside of position try fallbacks like this. So, you'd write position {dash} try {dash} fallbacks, colon, and then you'd write {dash} {dash} bottom, because that's the name of the position try rule that we just created. And you can even mix these custom fallbacks with the browser's default ones. So, it's just a comma-separated list. You can do {dash} {dash} bottom, comma, flip block, flip inline. The world is your oyster, [00:08:45] and it's cool that we get browser defaults, but we also have this customization. >> Yeah, and if I'm not mistaken to be 100% correct here, so the browser tries them in from left to right, right? So, you have a list and then it tries the first one. If that one causes overflow and whatnot, then it will try the second one and so on and so on. >> Yes, exactly. >> This is This is so cool. This is so cool. There are some more anchor-related features that are really useful, but maybe lesser known, which landed as part of the anchor positioning API, such as the anchor size function. So, that's anchor {dash} size function. And that one lets you size your positioned element based on the dimensions of your anchor. So, imagine a popover that's the same width as the button that triggered it. Well, you would do that by setting the width on that popover to the value [00:09:28] of anchor {dash} size and then width inside of it, because you want to take over the width from the anchor itself. >> Another cool thing that you can do is you can re-anchor elements to create effects where you might have a shared pointer or other visual element being used to guide the user. And this could be used in a teaching UI or I just built a demo with an action bar or even in a scroll spy, which I also built a demo like that to show you which section you're on in or in carousel markers, too. You can have one icon that sort of moves around the screen to different anchor points and dynamically re-anchors. And I recently wrote an article about this follow-the-leader technique on my personal blog, which we'll also link in the show notes cuz I think it's a pretty cool way to use [00:10:11] anchoring. >> Yeah, that was such a cool demo. I like it. Also, a new feature that's currently in the works is container queries for fallback positions, also known as anchor queries. This lets you style any part of the positioned element based on which fallback position it is in. Which you really need if you want to do something like add a triangle or carrot visually connecting the positioned element to its anchor. Say you have an anchored tooltip with a little arrow that points at the anchor. When it's above the anchor, well, the arrow points downwards and it's connected on the bottom. But when it's below the anchor, you need it to point upward and connect from the top. And with anchor queries, you'd be able to do this restyling. To do this, first you set container type anchored on the positioned element, so [00:10:54] that's the tooltip in this case, and then you would use a new value for at container that you can use. It's a new function, so it's at container and then the function is named anchored. And in there, the argument that you give it is to include the specific fallback that you are styling for. So in our simple case with the arrow, you might want to style the flip block fallback and you do it using at container anchored then fallback colon flip block. So when that fallback is being used, then update the styles. Note that this API is still in development, but I'm sure we'll dive more into it as it gets closer to landing. And you can find a demo in the show notes. >> To round out this episode, I want to note that if you want to smoothly [00:11:36] transition your anchors between different positions, whether that's using dynamic re-anchoring or with anchor queries, or just when you want it to fall back to a different position as the screen changes size or you scroll through the UI, you need to use positioning properties like top, left, bottom, right, or their logical equivalents, and you can't use position area at this time. And this is because the logic to smoothly transition and interpolate positions in position area has not been implemented yet in any browser. And I know that it's a technically complex thing to implement, so if you want this capability, we need to hear from you to make it worth it for it to get shipped in browsers. >> And that's all we have this time for our run-through of CSS anchor positioning. [00:12:19] If you have any CSS questions, we would love to answer them on the show, so please tweet at us or post on Blue Sky with the hashtag CSS podcast. >> I'm @una on Twitter, and I'm una.im on Blue Sky. >> And I'm @bram.us on Blue Sky and @bram.is frontend.social on Mastodon. I'm also on Twitter, but please reach out to me on Blue Sky or Mastodon. >> If you like the show, please give us a review on your podcast app or share this with a friend. Those reviews help other people discover our show and allow us to have more time to deliver all the good content in the CSS world for you. >> Thank you so much and looking forward to your questions. >> And we'll see you next time. Bye-bye. >> [music] [00:13:07] [music], 96: CSS Anchor Positioning, Chrome for Developers, 01m4x7ebxc89ew2f6gffn8pv1h.