Re: [csswg-drafts] [css-position-3] Section 3.5.1 Conflicts with CSS2 Positioning Behavior (#11258)

Second option from https://github.com/w3c/csswg-drafts/issues/11242#issuecomment-2486131051:

> Stop saying that a lone `auto` inset resolves to zero. Instead, resolve the `auto` inset to whatever value makes the size of the inset-modified containing block match the fit-content size of the abspos. This fit-content size  shrinks-to-fit into the original containing block size minus the  non-auto inset, or equivalently, into a tentative inset-modified  containing block with the `auto` offset resolved to 0.



Option Breakdown:

> Stop saying that a lone `auto` inset resolves to zero

- For CSS2 developers, the `auto` inset remains `auto`.
- For CSS3 developers, `auto` inset represents an offset of an 'inset-modified containing block' edge.


> resolve the `auto` inset to whatever value makes the size of the inset-modified containing block match the fit-content size of the abspos

CSS3 Positioning example:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      #parent {
        position: relative;
        width: 200px;
        height: 200px;
        border: 5px solid black;
      }

      #child {
        position: absolute;
        background-color: red;
        width: 50px;
        height: 50px;
        right: 0px; 
        left: 0px;
        margin-left: auto;
        margin-right: auto;
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="child"></div>
    </div>
  </body>
</html>
```



Available Information:

1. The `left` and `right` edges of the inset-modified containing block (blue lines below) are known.

2. As per the [spec](https://www.w3.org/TR/css-position-3/#abspos-margins):

If either inset property (`left` or `right`) on the relevant axis is `auto`, any `auto` margins resolve to `0`. Therefore, for the `#child` element, both `margin-left` and `margin-right` resolve to `0`.


Illustration:

![image](https://github.com/user-attachments/assets/8a0c6a7d-2a8d-430d-8dc6-06e98250549a)

There is no information about the exact position of the `#child` element within the `#parent`. As a result, it is impossible to determine the size of the inset-modified containing block based on any specific offsets, regardless of the fit-content size dimensions of the `#child`.

> "Two ways":
>
> 1. This fit-content size  shrinks-to-fit into the original containing block size minus the  non-auto inset,
> 2. This fit-content size  shrinks-to-fit into a tentative inset-modified  containing block with the `auto` offset resolved to 0.

Neither approach determines the exact position of the `#child` element within the `#parent`, making it impossible to establish the inset-modified containing block's offset.

-- 
GitHub Notification of comment by gitspeaks
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11258#issuecomment-2492498549 using your GitHub account


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

Received on Thursday, 21 November 2024 22:39:54 UTC