v157 · css · anchor positioning

Default-anchor semantics

The first implementation of anchors-valid was reverted because “valid” was ambiguous: an anchored element can reference several anchors at once. The CSSWG narrowed it to the default anchor only — the one position-anchor names. Remove each anchor below and see which removal the resolved semantics react to.

Probing this browser…

Three anchors, one of them default

The card below sets position-anchor: --default-anchor and also reads left: anchor(left). Only the first is the default anchor. Remove anchors and compare what the reverted “any anchor” rule would have done against the resolved “default anchor only” rule.

--default-anchor --secondary-b --secondary-c anchored card — tied to --default-anchor
All three anchors present. The card is anchored and visible.

why the first attempt was reverted

.card {
  position-anchor: --default-anchor;   /* THE default anchor */
  left: anchor(--secondary-b left);    /* another anchor, not the default */
  top: anchor(--secondary-c bottom);   /* a third */

  position-visibility: anchor-valid;
}

Under the reverted “any referenced anchor” reading, losing any of those three would hide the card — the engine has to track every anchor reference across every inset property, and an author removing an unrelated decorative anchor gets a mysteriously vanishing card.

Under the resolved reading, only --default-anchor counts. That is one reference to track, it matches how anchor-visible already behaves, and it is the anchor the element is conceptually attached to. The other two still affect placement; they just do not affect validity.

what “valid” actually means

An anchor stops being valid when it is removed from the DOM, when it is not rendered (display: none), or when it is no longer an acceptable anchor element for the positioned element — which includes tree-order and containing-block requirements, not merely existing. anchor-valid covers all of those for the default anchor.

That is a different question from anchor-visible, which is about the anchor being scrolled out of view or clipped while remaining perfectly valid. The two compose: position-visibility: anchor-valid anchor-visible.

see also