[css-position-3] Proposal for position: float; Mix sticky and relative positioning

[vrugtehagel]

This is a proposal for position: float;. In a nutshell, it is mixing sticky and relative positioning.

Proposed behavior

If an element with position: float; doesn't have any scrolling ancestors, then it behaves like position: relative; (and so does the inset property and its longhands).

If that element does have a scrolling ancestor, then the element "floats" with respect to the other content in that container. It will not visually move when scrolling the scrollable ancestor (like sticky), but it will still take up space in the document flow (like both relative and sticky). However, unlike sticky, which needs at least one of the inset longhands to have a non-auto value to have any effect, the element always floats relative to its nearest scrolling ancestor. The inset properties move the element relative to the elements original (unscrolled) position (like relative).

In other words, when the nearest scrolling ancestor is at its initial, unscrolled position, the element is in the same place it would be with position: relative; when scrolling, the element remains in that specific place (not scrolling with the rest of the content) like a sticky (or fixed) element.

Some example use-cases

Navigation menus

Probably one of the most common use-cases would be navigation menus. Often, we choose to use position: fixed for these; however, this ends up removing the element from the normal document flow, causing our document content to start under (in the z-direction) the navigation bar. This means we need something like setting a padding-top on a container element around our content. That in turn means we're restricted to choosing absolute heights for our navigation menu (which often is fine, but awkward) and it means we have to manually adjust that padding-top in case our navigation menu wants to be sized differently across different screen sizes.

That's not where it ends, though; there are two followup cases that become significantly more painful without position: float;

• Let's say we want a promotional banner above our navigation menu, pushing the navigation menu down somewhat. Of course, we also want this to push the content down (avoiding the navbar overlapping content), so we need to once again adjust our padding-top. This time, we also need to set yet another fixed length for the top property on the navigation menu to put it lower.
• Let's say we have a sub-navigation menu (i.e. another navigation menu just below the main one) with some additional links, or breadcrumbs. This suffers yet again from the same issue; we're forced to give this a fixed height (and top). It also cannot wrap the links, or our content will end up sitting under the sub-navigation menu due to the fixed, and too small, padding-top.

Having position: float;, we could simply give our navigation menu (and promotional banner or sub-menu) that declaration, and it would do exactly what we want. The content gets pushed down by the menu, but the menu remains in its initial position even after scrolling.

Floating grid items

For the second example, let's say we're building a spreadsheet-like app. We arrange our cells in a grid using display: grid. The grid's parent is a scroll container, so the grid can be nice and large and we can scroll to see the overflowing cells.

Now, we want to "pin" the first two columns to that scroll container. Setting position: sticky; with left: 0; on the cells in the first column would work just fine. However, for the second column, we are once again restricted to fixed sizes; left only helps if our first column is not using content-based or flexibly sized. We are essentially forced to either

• Fix the width of the first column, so we can use position: sticky; with left
• Use position: sticky;, but use JavaScript to keep the left property updated for the second column.

With this proposal, we could give all the cells in the first and second columns position: float; and it would be exactly what we want (without even having to specify left or inset).

[Loirooriol]

I wouldn't call it float to avoid confusion with the float property.

[johannesodland]

These issues might be relevant:

• #2496 where the shortcomings of position: sticky is covered and it's suggested that sticky should be it's own property.
• #8905 Where it's proposed that anchor positioning could be used to define the sticky inset. This comment proposes how that could be used to stack multiple sticky elements together.

[vrugtehagel]

Closing for lack of interest. I also am inclined to believe CSS anchoring and/or other proposals are better solutions to the problem at hand.