[css-position] Referencing different viewports in sticky positioning

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

Start with the linked CSS Position Property section and review how sticky positioning currently references the dynamic viewport, alongside the viewport-unit behavior described in the issue. Work out the property name and values with the CSS Working Group, then specify sticky behavior for the small, large, and dynamic viewports; done means the specification change is agreed and documented.