Positioned layout: relative positioning #79

Phase 9: Advanced Layout#

Implement position: relative so that elements can be offset from their normal flow position without affecting the layout of surrounding elements.

Current State#

• Position::Relative is already parsed in style/computed.rs
• top, right, bottom, left are parsed as LengthOrAuto in computed styles
• Layout currently ignores position offsets entirely — all elements behave as static

Requirements#

1. Apply relative offsets after normal layout: After computing the normal-flow position for a position: relative element, shift its rendered position by the resolved top/right/bottom/left values
2. Do not affect surrounding elements: Relative positioning only moves the element visually — siblings and parent layout remain unchanged (the element's original space is preserved)
3. Offset resolution rules (per CSS spec):
   • If both top and bottom are specified, top wins (for direction: ltr)
   • If both left and right are specified, left wins (for direction: ltr)
   • auto values resolve to 0
4. Percentage resolution: top/bottom percentages resolve against containing block height; left/right against containing block width (can defer percentage support to the viewport units/percentage issue)

Files to Modify#

• crates/layout/src/lib.rs — Apply offsets in compute_layout() or a new post-layout pass
• crates/style/src/computed.rs — Ensure top/right/bottom/left values are accessible

Tests#

• Element with position: relative; top: 10px; left: 20px renders shifted from normal position
• Sibling elements are not affected by the relative offset
• Conflicting offsets (top + bottom) resolve correctly
• auto offsets have no effect

Acceptance Criteria#

• position: relative with top/left/bottom/right offsets works correctly
• Normal flow layout of surrounding elements is unaffected
• All tests pass, clippy clean, fmt clean