MicrosoftEdge / MicrosoftEdge/MSEdgeExplainers
[CSS Anchored Positioning] Can anchor positioning be used for non-top-layer elements?
@BoCupp-Microsoft is already working on this.
Since Jun 4, 2021.
- 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:
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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.