MSEdgeExplainers icon indicating copy to clipboard operation
MSEdgeExplainers copied to clipboard

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

Open BoCupp-Microsoft opened this issue 4 years ago • 0 comments

@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.

BoCupp-Microsoft avatar Jun 04 '21 09:06 BoCupp-Microsoft