One other Anchor Positioning Demo: A number of Anchors

Right here’s a brand new demo the place we’re positioning article references for a physique of textual content relative to 2 totally different anchors for the block and inline axes. Every reference is positioned in order that it aligns vertically with the place it’s referred to within the textual content, however seems adjoining to the principle content material wrapper on the horizontal axis.

The content material space has its personal anchor identify:

.content material {
  anchor-name: --content;
}

We reference this anchor to alternately place our references to the left or proper of the textual content utilizing the anchor() perform:

.ref {
  place: absolute;
  inset-inline-start: anchor(--content proper);

  &:nth-of-type(even) {
    inset-inline-end: anchor(--content left);
    inset-inline-start: auto;
  }
}

Moreover we’ll set a named anchor on every of the anchor hyperlinks in our physique of textual content, utilizing the href attribute as a selector:

[href="#ref_1"] {
  anchor-name: --anchor_1;
}

[href="#ref_2"] {
  anchor-name: --anchor_2;
}

/* and many others. */

We then refer to those so as to place our references vertically. I’m utilizing ID selectors, as there ought to solely be one in every of every of those on the web page:

#ref_1 {
  inset-block-start: anchor(--anchor_1 prime);
}

#ref_2 {
  inset-block-start: anchor(--anchor_2 prime);
}
/* and many others. */

This demo makes use of logical properties, however we might simply as simply use bodily properties (prime, proper, backside, left) if we choose:

#ref_1 {
  prime: anchor(--anchor_1 prime);
}

#ref_2 {
  prime: anchor(--anchor_2 prime);
}
/* and many others. */

Right here’s the total demo (view in a supporting browser!):

See the Pen
Anchor positioning with a number of anchors by Michelle Barker (@michellebarker)
on CodePen.

I’ll be talking about CSS structure and anchor positioning at Pixel Pioneers convention in Bristol, UK this Friday! There’s nonetheless time to seize a ticket!