Anchor Positioning Simply Don’t Care About Supply Order

Ten divs stroll right 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 sufficient chairs for them to all sit on the bar, so that you want the tenth div to take a seat on the lap of one of many different divs, say the second. We are able to visually cowl the second div with the tenth div however have to ensure they’re sitting subsequent to one another within the HTML as nicely. The order issues.

<div>1</div>
<div>2</div>
<div>10</div><!-- Sitting subsequent 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 wants to take a seat on the second div’s lap somewhat than subsequent to it. So, maybe we redefine the connection between them and make this a parent-child sorta factor.

<div>1</div>
<div class="dad or mum">
  2
  <div class="little one">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 are able to do some difficult positioning dance to comprise the tenth div contained in the second div within the CSS:

.dad or mum {
  place: relative; /* Accommodates Div #10 */
}

.little one {
  place: absolute;
}

We are able to inset the kid’s place so it’s pinned to the dad or mum’s top-left edge:

.little one {
  place: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

And we are able to set the kid’s width to 100% of the dad or mum’s dimension in order that it’s totally protecting the dad or mum’s lap and utterly obscuring it.

.little one {
  place: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
}

Cool, it really works!

Anchor positioning simplifies this course of a heckuva lot as a result of it simply doesn’t care the place the tenth div is within the HTML. As an alternative, we are able to work with our preliminary markup containing 10 individuals precisely as they entered the bar. You’re going to need to observe alongside within the newest model of Chrome since anchor positioning is simply supported there by default on the time I’m scripting this.

<div>1</div>
<div class="dad or mum">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="little one">10</div>

As an alternative, we outline the second div as an anchor component utilizing the anchor-name property. I’m going to proceed utilizing the .dad or mum and .little one courses to maintain issues clear.

.dad or mum {
  anchor-name: --anchor; /* this may be any title formatted as a dashed ident */
}

Then we join the kid to the dad or mum by the use of the position-anchor property:

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

The very last thing we now have to do is place the kid in order that it covers the dad or mum’s lap. We now have the position-area property that permits us to heart the component over the dad or mum:

.little one {
  position-anchor: --anchor;
  position-area: heart;
}

If we need to utterly cowl the dad or mum’s lap, we are able to set the kid’s dimension to match that of the dad or mum utilizing the anchor-size() operate:

.little one {
  position-anchor: --anchor;
  position-area: heart;
  width: anchor-size(width);
}

No punchline — simply one of many issues that makes anchor positioning one thing I’m so enthusiastic about. The truth that it eschews HTML supply order is so CSS-y as a result of it’s one other separation of considerations between content material and presentation.

---

Anchor Positioning Simply Don’t Care About Supply Order initially revealed on CSS-Methods, which is a part of the DigitalOcean household. You need to get the e-newsletter.