[css2][css-position] Static position needs to ignore floats

https://drafts.csswg.org/css2/#abs-non-replaced-width

The static position for left is the distance from the left edge of the containing block to the left margin edge of a hypothetical box that would have been the first box of the element if its position property had been static and float had been none.

https://drafts.csswg.org/css-position/#staticpos-rect mostly defers to CSS2, but adding clear: none:

Finding the static position and the static-position rectangle assumes that both float and clear (as well as position) have their initial values

But assuming clear: none is not enough, this needs to entirely disregard floats, see this testcase:

<!DOCTYPE html>
<div style="overflow: hidden; position: relative; width: 100px; border: solid; margin: 1em 0">
  <div style="float: left; width: 50px; height: 50px; background: magenta"></div>
  <div style="position: absolute; overflow: hidden; width: 25px; height: 25px; background: cyan"></div>
</div>
<div style="overflow: hidden; position: relative; width: 100px; border: solid; margin: 1em 0">
  <div style="float: left; width: 50px; height: 50px; background: magenta"></div>
  <div style="position: static; overflow: hidden; width: 25px; height: 25px; background: cyan"></div>
</div>

Gecko, Blink and WebKit agree:

BTW, this is just if the original display has a block outer display value. inline doesn't ignore the float.

The sentence that does the work here is

When both inset properties in a given axis are auto, they are resolved into a static position by aligning the box into its static-position rectangle

The static-position rectangle for block boxes ignores floats.

The static-position rectangle is a zero-thickness rectangle spanning between the inline-axis sides of the box’s static-position containing block

Possibly there needs to be more explanation of how this alignment into the staticpos rectangle happens, but I think the spec is not incorrect about the interaction with floats here.

Navigation Menu

Repository navigation

[css2][css-position] Static position needs to ignore floats #9991

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[css2][css-position] Static position needs to ignore floats #9991

Description

Activity

Loirooriol commented on Feb 25, 2024

fantasai commented on Aug 9, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions