Awesome CSS Anchor Positioning

A curated list of awesome things related to CSS Anchor Positioning

Documentation and How-to

• W3C CSS Anchor Positioning Editor's Draft
• MDN Anchor Positioning
• CSS-Tricks CSS Anchor Positioning Guide

Polyfill

• OddBird CSS Anchor Positioning Polyfill

Interactive Guides

• Anchoreum
• Anchor Positioning in Space

Videos

• CSS Anchor Positioning in Practice - OddBird Winging it Live
  • Notes on the episode from Geoff Graham
• Anchor Positioning, Tab Atkins-Bittner at CSS Day 2024
• CSS Popover + Anchor Positioning is Magical - Kevin Powell

Articles

• Future CSS: Anchor Positioning - Roman Komarov
• Anchor Positioning Quirks- CSS-Tricks

Demos

• Anchor Positioning CodePen demos, James Stuckey Weber
• Hover cards

Helpful Tools

• Containing Block DevTools Extension

Baseline Status Component

Embed the Baseline Status Component for Anchor Positioning on your blog.

<script src="https://cdn.jsdelivr.net/npm/baseline-status@1/baseline-status.min.js" type="module"></script>
<baseline-status featureId="anchor-positioning"></baseline-status>

Support OddBird's Anchor Positioning Work

At OddBird, we love contributing to the languages & tools developers rely on. We're currently working on polyfills for new Popover & Anchor Positioning functionality, as well as CSS specifications for functions, mixins, and responsive typography.

There are 2 ways to help us keep this work sustainable and centered on your needs as a developer!

1. Sponsor us. We display sponsor logos and avatars on our website and offer other fun perks.
2. Hire us to develop the Anchor Positioning polyfill or another OSS language/tool you rely on.

Get OSS Work & Expense Updates