CSS Anchor Positioning is a native CSS feature that allows you to position an element relative to another element (called the anchor). It eliminates the need for JavaScript-based positioning libraries. Use anchor-name on the reference element and position-anchor plus position-area or anchor() on the positioned element.

CSS Anchor Positioning is supported in Chrome 125+ and Edge 125+ (Chromium-based). Firefox and Safari are actively working on implementation. For production use, consider providing a JavaScript fallback or using progressive enhancement.

position-area is simpler and more declarative — perfect for common positions like center, top, bottom left, etc. Use anchor() when you need precise pixel-level control or want to combine with calc() for complex layouts. Both are valid and can be used together.

Set anchor-name: --my-anchor; on the parent, then on the child use position-anchor: --my-anchor; position: absolute; position-area: center;. The child will stay centered on the parent regardless of scroll or layout changes — truly "pinned."

Yes! You can define multiple anchor-name values on different elements and reference them with anchor() for different edges. For example: top: anchor(--anchor-a, bottom); left: anchor(--anchor-b, right); — this enables complex cross-element positioning.

By default, the positioned element follows the anchor. You can control this behavior with anchor-scroll on the positioned element: anchor-scroll: always; (default), anchor-scroll: default; (only when anchor is in scrollport), or manage visibility manually with position-visibility.