Sticky positioning (position: sticky) #87

Phase 9: Advanced Layout#

Implement position: sticky which toggles between relative and fixed positioning based on scroll position.

Dependencies#

• Relative positioning must be implemented first
• Fixed positioning must be implemented first
• Overflow scrolling should be implemented first (sticky depends on scroll position)

Current State#

• Position::Sticky is NOT parsed (only Static, Relative, Absolute, Fixed exist)
• No scroll tracking in the layout/render pipeline

Requirements#

1. Parse position: sticky in computed styles
2. Layout behavior:
   • Initially laid out in normal flow (like relative)
   • When the user scrolls past a threshold defined by top/right/bottom/left, the element "sticks" to that offset relative to its scroll container
   • The element is constrained within its containing block — it unsticks when the containing block scrolls past
3. Scroll container: The nearest ancestor with overflow: auto, overflow: scroll, or the viewport
4. Sticky constraint rectangle: The element sticks within the intersection of its containing block and the scroll container's visible area
5. Does not affect normal flow: Like relative positioning, the element's original space is preserved

Files to Modify#

• crates/style/src/computed.rs — Add Sticky variant to Position enum
• crates/layout/src/lib.rs — Mark sticky elements, compute stick thresholds
• crates/render/src/lib.rs — Adjust paint position based on scroll offset and sticky thresholds
• Scroll tracking infrastructure (may require additions to browser state)

Tests#

• position: sticky; top: 0 sticks to top of scroll container when scrolled past
• Element unsticks when its containing block scrolls out
• Sticky element preserves its normal flow space
• Multiple sticky elements in same container work correctly

Acceptance Criteria#

• position: sticky works with top offset in a scrolling container
• Element transitions between relative and fixed behavior at correct scroll thresholds
• Containing block constraints are respected
• All tests pass, clippy clean, fmt clean