w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.36k stars 641 forks source link

[css-anchor-position-1][css-position] behavior of inset-area when no anchor is defined #10500

Open Afif13 opened 1 week ago

Afif13 commented 1 week ago

I just tried the below code:

.container {
  position: relative;
}
.element {
  position: absolute;
  inset-area: center;
  margin: auto;
}

And to my surprise, it center the absolute element. Demo: https://codepen.io/t_afif/pen/OJYwybK

Based on the Specification the propety applies to "positioned elements with a default anchor element". Does it mean that any positioned element has a default anchor which is its containing block?

If it's the correct behavior, I think the Spec should clarify the "default anchor" part. Or maybe this is a bug and inset-area should have no effect?

kizu commented 1 week ago

One thing I wonder about: should we relax this requirement, and if there is no default anchor, treat the containing block as one for this purpose?

From an author standpoint, nothing in inset-area says that there is some relation to the anchor, so it could be useful to allow using it without setting up the anchor itself to avoid confusion + cover some useful cases like the one @Afif13 mentions.