anchor-scope

The anchor-scope CSS property can be used to limit the scope in which a positioned element can be associated with anchor elements to a particular subtree.

When multiple anchor elements on a page are given the same anchor-name value and a positioned element is associated with that anchor name (by specifying the name as its position-anchor property value), the positioned element will be associated with the last anchor element in the source order with that anchor name.

This can be a problem in certain situations. For example, if a document contains multiple repeated components, each with a positioned element tethered to an anchor, all the positioned elements will be anchored to the last anchor on the page unless each component uses a different anchor name. This is likely not the desired behavior.

Syntax example: anchor-scope: none;