Anchor Positioning Simply Do not Care About Supply Order

Ten divs stroll right into a bar:

1
2
3
4
5
6
7
8
9
10

There’s not sufficient chairs for them to all sit on the bar, so that you want the tenth div to sit down on the lap of one of many different divs, say the second. We will visually cowl the second div with the tenth div however have to verify they’re sitting subsequent to one another within the HTML as properly. The order issues.

1
2
10

3
4
5
6
7
8
9

The tenth div wants to sit down on the second div’s lap relatively than subsequent to it. So, maybe we redefine the connection between them and make this a parent-child sorta factor.

1

3
4
5
6
7
8
9

Now we will perform a little difficult positioning dance to include the tenth div contained in the second div within the CSS:

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

.little one {
  place: absolute;
}

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

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

And we will set the kid’s width to 100% of the mum or dad’s dimension in order that it’s totally masking the mum or dad’s lap and fully 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 will 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 just supported there by default on the time I’m scripting this.

1
2
3
4
5
6
7
8
9
10

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

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

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

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

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

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

If we need to fully cowl the mum or dad’s lap, we will set the kid’s dimension to match that of the mum or dad utilizing the anchor-size() perform:

.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.