Anchor Positioning Just Don’t Care About Source Order

Ten divs walk into a bar:

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>

There’s not enough chairs for them to all sit at the bar, so you need the tenth div to sit on the lap of one of the other divs, say the second one. We can visually cover the second div with the tenth div but have to make sure they are sitting next to each other in the HTML as well. The order matters.

<div>1</div>
<div>2</div>
<div>10</div><!-- Sitting next to Div #2-->
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>

The tenth div needs to sit on the second div’s lap rather than next to it. So, perhaps we redefine the relationship between them and make this a parent-child sorta thing.

<div>1</div>
<div class="parent">
  2
  <div class="child">10</div><!-- Sitting in Div #2's lap-->
</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>

Now we can do a little tricky positioning dance to contain the tenth div inside the second div in the CSS:

.parent {
  position: relative; /* Contains Div #10 */
}

.child {
  position: absolute;
}

We can inset the child’s position so it is pinned to the parent’s top-left edge:

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

And we can set the child’s width to 100% of the parent’s size so that it is fully covering the parent’s lap and completely obscuring it.

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

Cool, it works!

Anchor positioning simplifies this process a heckuva lot because it just doesn’t care where the tenth div is in the HTML. Instead, we can work with our initial markup containing 10 individuals exactly as they entered the bar. You’re going to want to follow along in the latest version of Chrome since anchor positioning is only supported there by default at the time I’m writing this.

<div>1</div>
<div class="parent">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div class="child">10</div>

Instead, we define the second div as an anchor element using the <a href="https://css-tricks.com/almanac/properties/a/anchor-name/">anchor-name</a> property. I’m going to continue using the .parent and .child classes to keep things clear.

.parent {
  anchor-name: --anchor; /* this can be any name formatted as a dashed ident */
}

Then we connect the child to the parent by way of the <a href="https://css-tricks.com/almanac/properties/p/position-anchor/">position-anchor</a> property:

.child {
  position-anchor: --anchor; /* has to match the `anchor-name` */
}

The last thing we have to do is position the child so that it covers the parent’s lap. We have the <a href="https://css-tricks.com/almanac/properties/p/position-area/">position-area</a> property that allows us to center the element over the parent:

.child {
  position-anchor: --anchor;
  position-area: center;
}

If we want to completely cover the parent’s lap, we can set the child’s size to match that of the parent using the <a href="https://css-tricks.com/almanac/functions/a/anchor-size/">anchor-size()</a> function:

.child {
  position-anchor: --anchor;
  position-area: center;
  width: anchor-size(width);
}

No punchline — just one of the things that makes anchor positioning something I’m so excited about. The fact that it eschews HTML source order is so CSS-y because it’s another separation of concerns between content and presentation.

---

Anchor Positioning Just Don’t Care About Source Order originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Source: Read More