[csswg-drafts] [css-position-3][css-align-3] Handling center alignment for abspos boxes with auto/normal self-alignment and center item alignment in parent (#12542)

sammygill has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-position-3][css-align-3] Handling center alignment for abspos boxes with auto/normal self-alignment and center item alignment in parent ==
```
<div style="position: relative;">
    <div style="display: grid; align-items: center; width: 22px; height: 30px; border: 1px solid blue;">
        <div style="position: absolute; background-color: green; width: 8px; height: 6px;"></div>
    </div>
</div>
```

In the above example, Gecko and Blink both center align the box vertically within the grid's content box, which seems reasonable to me. However, I was trying to find some spec text which explains how this exactly occurs to rationalize it but was struggling to find something. According to my current reading, what it looks like should be occurring is something along the lines of:

1.) Compute the insets for the containing block with the rules for center alignment described in https://www.w3.org/TR/css-position-3/#resolving-insets. I believe this just ends up being 0 for both inset values.

Note: We refer to the parent's `align-items` value because of https://drafts.csswg.org/css-align-3/#align-self-property

2.) After sizing the box, we need to align it within its alignment container. Again referring to https://drafts.csswg.org/css-align-3/#align-self-property since we are computing the actual position of the box, this should behave as normal. However, https://drafts.csswg.org/css-align-3/#align-abspos seems to state that the normal behavior should either be start or stretch for the box (start in this case, I think).

I assume the intention is for the box to be center aligned, but it seems to be a bit at odds with the current state of the spec. Should the normal behavior of an abspos box be adjusted in this case to take this into consideration? Or perhaps are Gecko and Blink referring to a different part of the spec that results in this rendering? 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12542 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 30 July 2025 01:06:03 UTC