Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
BoCupp-Microsoft opened this issue Jun 4, 2021 · 0 comments

Comments

@BoCupp-Microsoft
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants