Skip to content

[CSS Anchored Positioning] Can anchor positioning be used for non-top-layer elements? #489

Open
@BoCupp-Microsoft

Description

@BoCupp-Microsoft

@una shared a codepen with me and asked why we can't use anchor positioning on elements that aren't in the top layer.

Creating this issue to facilitate that discussion.

Reference markup:

 <style>
    figure {
      display: inline-block;
    }

    blockquote {
      background: lightgray;
      padding: 1rem;
    }

    figure {
      position: relative;
    }

    figcaption {
      position: absolute;
      right: 0;
    }

    figcaption:before {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 15px solid lightgray;
      top: -1rem;
      right: 4rem;
    }
</style>
<p>Lorem ipsum...</p>

<figure>
  <blockquote  cite="https://developer.mozilla.org/samples/html/figure.html">
    Quotes, parts of poems can also be a part of figure.
  </blockquote>
  <figcaption anchor="blockquote"><a href="">MDN editors</a></figcaption>
</figure>

<p>Lorem ipsum...</p>

The markup renders like this:

Screen Shot 2021-06-04 at 1 57 32 AM

And the question is why can't we anchor the figcaption to the bottom right of the blockquote? Here's a hypothetical markup that doesn't align with the current proposal but is useful for discussion:

/* hypothetical CSS for figcaption (not aligned w/explainer) */
figcaption {
  anchor: blockquote / bottom right;
}

@una let me know if I've captured the question correctly.

Metadata

Metadata

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions