[css-position] Referencing different viewports in sticky positioning #8934
Description
This proposal seeks to extend the CSS positioning specification to allow elements with sticky positioning to reference the small, large, or dynamic viewport in a similar manner to viewport units.
Currently, an element with sticky positioning attaches to the dynamic viewport's bottom, causing it to shift upwards when the User Agent (UA) interfaces expand, which may not always align with the designers' intentions.
Proposed solution (property name and values up for bike shedding):
.sticky {
position: sticky;
bottom: 0;
sticky-viewport: large;
}This modification allows elements to be sticky relative to the specified viewport.
Consider an editorial article featuring a 100lvh tall visualization that sticks to the viewport's bottom. The current spec may push part of this visualization off-screen when the UA interface expands. While sizing the visualization to the dynamic viewport is a workaround, it alters the layout when the interface expands or collapses.
Allowing elements to be sticky to the large viewport enables designers to accommodate the UA interface, thereby maintaining a consistent layout regardless of whether the UA interface is expanded or collapsed.
Link to Relevant Spec Section: Position Property