Learning Anchor Positioning

30 Jun 2026

I’m learning about CSS anchor positioning, widely available in 2026. I want to use these for sidenotes, as described in the 2023 article https://meyerweb.com/eric/thoughts/2023/09/12/nuclear-anchored-sidenotes/^[1]

There is one light. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. There are ^two lights. word There are _three lights. This is a paragraph 2. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. there are four lights This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

However, as of <2026-06-30 Tue> I couldn’t make css top: or bottom: work right. I can set top: anchor(top) and that works. Or top: 1em and that works. Or top: anchor(--aside bottom, 0px). But not top: max(anchor(top), anchor(--aside bottom, 0px)). So “There are two lights” and “There are three lights” are overlapping. Why?!

The codepen Eric Meyer links to doesn’t work either, so that means it’s not just me. The anti-overlap feature doesn’t work. Maybe it worked in 2023’s proposal and got changed by 2026.

Also:

https://gwern.net/sidenote^[2] looks at many other implementations of sidenotes (but not the meyerweb one)
https://meyerweb.com/eric/thoughts/2025/10/28/parenthetical-asidenotes/^[3]
https://meyerweb.com/eric/thoughts/2025/10/29/custom-asidenotes/^[4]

Links