- From: gitspeaks via GitHub <sysbot+gh@w3.org>
- Date: Tue, 26 Nov 2024 08:07:34 +0000
- To: public-css-archive@w3.org
> The value is that, for overconstrained cases, instead of just ignoring left or right, you can use CSS align properties to align withing the inset-modified containing block. I don't understand what you are saying. In [CSS2](https://www.w3.org/TR/css-position-3/#abspos-old), "over-constrained" refers to a situation where the sum of the positioned element’s properties for a given axis exceeds the size of the corresponding axis of the absolute-position containing block. >``` left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right > width of the containing block``` In such cases, the CSS2 specification directs that either `left` or `right` is ignored. How is "over-constrained" defined in CSS3? Additionally, how are CSS alignment properties and the inset-modified containing block relevant in this context? >And it's not like it's a radically different model, it's just a slightly different way of explaining the CSS2 behavior. The CSS3 model is fundamentally different from CSS2, as distinct as day and night. In CSS2, the inset properties define the element’s position relative to the absolute-position containing block. In contrast, in CSS3, these properties define the coordinates of a reference frame (e.g inset-modified containing block) relative to the absolute-position containing block and the positioned element is aligned within that frame. For example, in CSS2, `top: 0; right: 0;` position the element at the top-right corner of the absolute-position containing block. This is aligned with established documentation, such as the following excerpt from the MDN introductory course ["Learn to style HTML using CSS"](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning#absolute_positioning): _“Notice that the position of the element has changed. This is because `top`, `bottom`, `left`, and `right` behave differently with absolute positioning. Rather than positioning the element based on its relative position within the normal document flow, they specify the distance the element should be from each side of the containing element. For example, an absolutely positioned element set to `top: 30px` and `left: 30px` will sit 30px from the top and left edges of its containing element.”_ In CSS3, however, `top: 0; right: 0;` specify the top-right coordinates of the _inset-modified containing block_. The _element's position_ within this block must be inferred based on its dimensions and the remaining inset properties. This model requires additional mental steps to calculate the element’s placement, making it far less intuitive compared to the CSS2 model. -- GitHub Notification of comment by gitspeaks Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11258#issuecomment-2499932409 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 26 November 2024 08:07:35 UTC