Skip to content

[css-anchor-position] Layered positioning #9816

Open
@Crissov

Description

@Crissov

anchor() etc. allow for the position and size of the spatial box of an element to be based on the box of another, randomly identified box. However, CSS is not 2D, but 2.5D, because boxes can overlay each other in an ordinal stack of layers, represented by the z-index property.

Authors frequently use very large absolute values for this property, because they want to ensure that a certain box (or class of boxes) is atop a certain other. It would be more elegant if they could actually reference that other layer. I think it is reasonable to reuse the recently established anchor element for that reference.

I believe almost all use cases can be covered by one of three results:

  1. Stack at the same z-index layer as the anchor element.
  2. Stack at the next higher layer as the z-index of the anchor element.
  3. Stack at the next lower layer as the z-index of the anchor element.

Sometimes, it may also be useful to guarantee that the next higher or lower layer has no other boxes in it, i.e. either create a new layer in between for the current box or push it to the next unused layer index. I’m not sure that these cases are relevant enough, though.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions