Not long ago, if we wanted a tooltip or popover positioned on top of another element, we would have to set our tooltip’s position to something other than CSS Anchor Positioning gives us a simple interface to attach elements next to others just by saying which sides to connect \u2014 directly in CSS. It also lets us set a fallback position so that we can avoid the overflow issues we just described. For example, we might set a tooltip element above its anchor but allow it to fold underneath the anchor when it runs out of room to show it above.<\/p>\n\n\n\n Anchor positioning is different from a lot of other features as far as how quickly it’s gained browser support: its first draft was published on June 2023<\/a> and, just a year later, it was released on Chrome 125<\/a>. To put it into perspective, the first draft specification for CSS variables was published in 2012<\/a>, but it took four years for them to gain wide browser support.<\/p>\n\n\n\n So, let’s dig in and learn about things like attaching target elements to anchor elements and positioning and sizing them.<\/p>\n<\/div>\n\n\n\n At its most basic, CSS Anchor Positioning introduces a completely new way of placing elements on the page relative to one another. To make our lives easier, we’re going to use specific names to clarify which element is connecting to which:<\/p>\n\n\n\n For the following code examples and demos, you can think of these as just two CSS Anchor Positioning is all about elements with absolute positioning (i.e., We’ll first look at the two properties that establish anchor positioning. The first, A normal element isn’t an anchor by default \u2014 we have to explicitly make an element an anchor. The most common way is by giving it a name, which we can do with the The name must be a This gives us an anchor element. All it needs is something anchored to it. That’s what we call the “target” element which is set with the The target element is an element with an absolute position linked to an anchor element matching what’s declared on the static<\/code> and use its inset\/transform properties to place it exactly<\/em> where we want. This works, but the element’s position is susceptible to user scrolls, zooming, or animations since the tooltip could overflow off of the screen or wind up in an awkward position. The only way to solve this was using JavaScript to check whenever the tooltip goes out of bounds so we can correct it… again in JavaScript.<\/p>\n\n\n\nQuick reference<\/h2>\n\n\n
\/* Define an anchor element *\/\n.anchor {\n anchor-name: --my-anchor;\n}<\/code><\/pre>\n\n\n\n\/* Anchor a target element *\/\n.target {\n position: absolute;\n position-anchor: --my-anchor;\n}<\/code><\/pre>\n\n\n\n\/* Position a target element *\/\n.target { \n position-area: start end;\n}<\/code><\/pre>\n\n\n\n\n Table of contents <\/summary>\n \n\n
\n
\n
Basics and terminology<\/h2>\n <\/summary>\n \n\n
\n
<div><\/code> elements next to one another.<\/p>\n\n\n\n<div class=\"anchor\">anchor<\/div>\n<div class=\"target\">target<\/div><\/code><\/pre>\n\n\n\nposition: absolute<\/code>), so there are also some concepts we have to review before diving in.<\/p>\n\n\n\n\n
static<\/code> or certain values in properties like contain<\/code><\/a> or filter<\/code><\/a>.<\/li>\n\n\n\ntop<\/code>, right<\/code>, bottom<\/code>, left<\/code>, etc.) reduce the size of the containing block into which it is sized and positioned, resulting in a new box called the inset-modified containing block<\/em>, or IMCB for short. This is a vital concept to know since properties we’re covering in this guide \u2014 like position-area<\/code> and position-try-order<\/code> \u2014 rely on this concept.<\/li>\n<\/ul>\n\n\n<\/details>\n\n\n\n
Attaching targets to anchors<\/h2>\n <\/summary>\n \n\n
anchor-name<\/code>, establishes the anchor element, while the second, position-anchor<\/code>, attaches a target element to the anchor element.<\/p>\n\n\n\n![\"Square](https://calendarstemplates.com/\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/09\/anchor-name-7-1024x576.png?resize=1024%2C576&ssl=1\")
<\/figure>\n\n\nanchor-name<\/code><\/h4>\n\n\nanchor-name<\/a><\/code> property.<\/p>\n\n\n\nanchor-name: none | <dashed-ident>#<\/code><\/pre>\n\n\n\n<dashed-ident><\/code>, that is, a custom name prefixed with two dashes (--<\/code>), like --my-anchor<\/code> or --MyAnchor<\/code>.<\/p>\n\n\n\n.anchor {\n anchor-name: --my-anchor;\n}<\/code><\/pre>\n\n\n\nposition-anchor<\/code> property.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n![\"Square](https://calendarstemplates.com/\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/09\/position-anchor-5-1024x576.png?resize=1024%2C576&ssl=1\")
<\/figure>\n\n\nposition-anchor<\/code><\/h4>\n\n\nanchor-name<\/code> property. This attaches the target element to the anchor element.<\/p>\n\n\n\nposition-anchor: auto | <anchor-element><\/code><\/pre>\n\n\n\n
![\"Anchor](https://calendarstemplates.com/\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/09\/position-area-9-1024x576.png?resize=1024%2C576&ssl=1\")
<\/figure>\n\n\n