MicrosoftEdge / MicrosoftEdge/MSEdgeExplainers

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

Open
#489 0 comments 0 reactions 2 assignees View on GitHub

@BoCupp-Microsoft is already working on this.

Since Jun 4, 2021.

CSS Anchored Positioning
Dominant language
HTML
Stars
1.4k
Forks
286
Avg merge
3d 1h
Merged PRs (30d)
8

Description

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

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.