Anchor Positioning Ignores Source Order

` elements stroll into a bar:

Unfortunately, there aren’t enough seats for everyone. So, we need Div #10 to sit on Div #2’s lap. Visually, we want Div #10 to cover Div #2 — but we also need them to be close together in the HTML structure, because order matters.

Here’s one way to rearrange the markup:

But just placing them next to each other isn’t enough. We actually want Div #10 to “sit on” Div #2, not just hang out beside it. To make that happen, we can nest Div #10 inside Div #2, creating a parent-child relationship:

Now, with a little CSS, we can position Div #10 exactly where we want:

“`css
.parent {
position: relative; /* Establishes a containing block for the child */
}

.child {
position: absolute;
}
“`

We can pin the child to the top-left corner of the parent like this:

“`css
.child {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
}
“`

And if we want Div #10 to fully cover Div #2, we can stretch its width to match:

“`css
.child {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
width: 100%;
}
“`

Boom — it works!

—

# Enter: Anchor Positioning

Now, what if we could avoid reorganizing the HTML altogether?

That’s where anchor positioning comes in. It lets us visually connect elements without worrying about their order in the markup. (Heads up: this feature currently only works in the latest Chrome builds.)

We can keep our original, clean markup:

First, we assign an anchor name to Div #2:

“`css
.parent {
anchor-name: –anchor; /* You can name it anything you like */
}
“`

Then, we tell Div #10 to anchor itself to Div #2:

“`css
.child {
position-anchor: –anchor; /* Must match the anchor-name */
}
“`

Finally, we center Div #10 over Div #2 using the `position-area` property:

“`css
.child {
position-anchor: –anchor;
position-area: center;
}
“`

And if we want Div #10 to match Div #2’s size exactly, we can use the `anchor-size()` function:

“`css
.child {
position-anchor: –anchor;
position-area: center;
width: anchor-size(width);
}
“`

—

# Why This Is So Cool

No punchline here — just pure excitement. Anchor positioning is a game-changer because it untangles the relationship between HTML structure and visual layout even further. It’s a very “CSS” way of thinking: separate content from presentation.

And that’s something worth raising a glass to. 🍻

—

Would you also like a shorter or more casual version of this rewrite?