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