Skip to content

[css-anchor-position] Anchor Element's "Containing Block" #12674

@dshin-moz

Description

@dshin-moz

Acceptable anchor element uses containing blocks of positioned and anchor elements.

If the anchor element is statically positioned, then its containing block is the nearest block container. The positioned element may use absolute positioning, then the containing block is the nearest 'position: absolute|relative|fixed' container, irrespective of it being a block or inline container.

According to above, given:

<div id=block>
  <span id=inline style="position: relative;">
    <span id=anchor style="anchor-name: --a;">Anchor</span>
    <span id=positioned style="position: absolute; position-anchor: --a; left: anchor(right); top: anchor(bottom);">Positioned</span>
  </span>
</div>

#positioned can't anchor to #anchor, because #anchor's containing block is #block, but #postioned's containing block is #inline, and hence #positioned's containing block is not an ancestor of #anchor?

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    Agenda+

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions