Positioned layout: absolute and fixed positioning #86

Phase 9: Advanced Layout#

Implement position: absolute and position: fixed layout with stacking contexts and z-index.

Dependencies#

• Relative positioning should be implemented first (provides the containing block concept)
• Overflow clipping should be implemented first (absolute positioning interacts with overflow)

Current State#

• Position::Absolute and Position::Fixed are parsed in computed styles
• top, right, bottom, left are parsed as LengthOrAuto
• z-index is NOT parsed
• Layout treats all elements as position: static

Requirements#

1. Absolute positioning:

   • Remove from normal flow (does not affect sibling layout)
   • Position relative to the nearest positioned ancestor (not static), or the initial containing block (viewport)
   • Resolve top/right/bottom/left against the containing block
   • If both top and bottom are specified with a height, the element is over-constrained (bottom is ignored for LTR)
   • auto offsets: use the element's static position (where it would have been in normal flow)

2. Fixed positioning:

   • Same as absolute but the containing block is always the viewport
   • Does not scroll with page content

3. Stacking context and z-index:

   • Parse z-index: auto (default), <integer>
   • Elements with position: absolute/fixed and z-index != auto create a stacking context
   • Painting order within a stacking context: backgrounds → negative z-index → block flow → floats → inline flow → z-index 0/auto → positive z-index

4. Width/height resolution:

   • An absolutely positioned element with left and right specified (and width: auto) stretches to fill
   • Same for top/bottom with height: auto

Files to Modify#

• crates/style/src/computed.rs — Parse z-index, ensure offsets resolve correctly for positioned elements
• crates/layout/src/lib.rs — Remove absolutely positioned elements from normal flow, position them relative to containing block
• crates/render/src/lib.rs — Implement stacking context paint order

Tests#

• position: absolute with top: 10px; left: 20px positions relative to nearest positioned ancestor
• position: fixed positions relative to viewport
• Absolutely positioned element does not affect sibling layout
• z-index ordering: higher z-index paints on top
• Stretching: left: 0; right: 0; width: auto fills containing block width

Acceptance Criteria#

• Absolute positioning works relative to nearest positioned ancestor
• Fixed positioning works relative to viewport
• z-index ordering is correct
• Elements are correctly removed from normal flow
• All tests pass, clippy clean, fmt clean