RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconGit IconSpeaking IconTools Icon
A bar chart shown with 2 popups anchored to the smallest and largest bars.
My google avatar.

CSS Anchor API is lookin rad!

2 min read

I often feel intimidated initially by new CSS things.. I've been putting off the new CSS Anchor api stuff cuz it looked scary.

But not 15m minutes into actually sitting with it, and I'm stoked.

basics #

You need something to anchor to, just like you need a named container or a view-timeline.

.some-non-floating-element {
  anchor-name: --side;

Next, assign some element's positions to that anchor. Let's say we want to put a floating element underneath that non-floating one. We'd want the top of the floating thing to be touching the bottom of the anchor:

.tooltippy {
  position: absolute;
  top: anchor(--side bottom);
  /* top of this touches the bottom of that */

Then, we want the left side of this tooltip to align with the left side of the anchor:

.tooltippy {
  left: anchor(--side left);
  /* left of this touches the left of that */

Now it's aligned with it: left aligned and under!

Resources #

Dig in:

  1. Jhey has a fantanstic anchor() collection on Codepen
  2. He also covers anchoring in a piece on the Chrome Developers Blog called Popups They're Making A Resurgence
  3. Official Explainer
  4. Official Spec

Mentions #

Join the conversation on

Crawl the CSS Webring?

previous sitenext site
a random site