Implement absolute and fixed positioning with z-index stacking

- Add z_index field to ComputedStyle and parse CSS z-index property
- Remove absolute/fixed elements from normal flow (block, inline, flex layout)
- Position absolute elements relative to nearest positioned ancestor's padding box
- Position fixed elements relative to viewport
- Support left/right/top/bottom offsets with percentage resolution
- Support width/height stretching when both sides are specified
- Implement stacking context paint order: negative z-index, in-flow, non-negative z-index
- Update normalize_children and margin collapsing to exclude out-of-flow elements
- Add tests for absolute positioning, fixed positioning, z-index, stretching, and
bottom/right positioning

Co-Authored-By: Claude Opus 4.6 (1M context) <[e-mail]>

crates/layout/src/lib.rs

···
     pub replaced_size: Option<(f32, f32)>,
     /// CSS `position` property.
     pub position: Position,
+    /// CSS `z-index` property (None = auto).
+    pub z_index: Option<i32>,
     /// Relative position offset (dx, dy) applied after normal flow layout.
     pub relative_offset: (f32, f32),
     /// CSS `overflow` property.
···
             line_height: style.line_height,
             replaced_size: None,
             position: style.position,
+            z_index: style.z_index,
             relative_offset: (0.0, 0.0),
             overflow: style.overflow,
             box_sizing: style.box_sizing,
···
 
 /// If a block container has a mix of block-level and inline-level children,
 /// wrap consecutive inline runs in anonymous block boxes.
+/// Out-of-flow elements (absolute/fixed) are excluded from the determination
+/// and placed at the top level without affecting normalization.
 fn normalize_children(children: Vec<LayoutBox>, parent_style: &ComputedStyle) -> Vec<LayoutBox> {
     if children.is_empty() {
         return children;
     }
 
-    let has_block = children.iter().any(is_block_level);
+    // Only consider in-flow children for block/inline normalization.
+    let has_block = children.iter().any(|c| is_in_flow(c) && is_block_level(c));
     if !has_block {
         return children;
     }
 
-    let has_inline = children.iter().any(|c| !is_block_level(c));
+    let has_inline = children.iter().any(|c| is_in_flow(c) && !is_block_level(c));
     if !has_inline {
         return children;
     }
···
     let mut inline_group: Vec<LayoutBox> = Vec::new();
 
     for child in children {
-        if is_block_level(&child) {
+        if !is_in_flow(&child) || is_block_level(&child) {
+            // Out-of-flow or block-level: flush any pending inline group first.
             if !inline_group.is_empty() {
                 let mut anon = LayoutBox::new(BoxType::Anonymous, parent_style);
                 anon.children = std::mem::take(&mut inline_group);
···
     matches!(b.box_type, BoxType::Block(_) | BoxType::Anonymous)
 }
 
+/// Returns `true` if this box is in normal flow (not absolutely or fixed positioned).
+fn is_in_flow(b: &LayoutBox) -> bool {
+    b.position != Position::Absolute && b.position != Position::Fixed
+}
+
 // ---------------------------------------------------------------------------
 // Layout algorithm
 // ---------------------------------------------------------------------------
···
 /// `available_width` is the containing block width — used as the reference for
 /// percentage widths, margins, and paddings (per CSS spec, even vertical margins/
 /// padding resolve against the containing block width).
+///
+/// `abs_cb` is the padding box of the nearest positioned ancestor, used as the
+/// containing block for absolutely positioned descendants.
+#[allow(clippy::too_many_arguments)]
 fn compute_layout(
     b: &mut LayoutBox,
     x: f32,
     y: f32,
     available_width: f32,
+    viewport_width: f32,
     viewport_height: f32,
     font: &Font,
     doc: &Document,
+    abs_cb: Rect,
 ) {
     // Resolve percentage margins against containing block width.
     // Only re-resolve percentages — absolute margins may have been modified
···
     if let Some((rw, rh)) = b.replaced_size {
         b.rect.width = rw.min(b.rect.width);
         b.rect.height = rh;
+        layout_abspos_children(b, abs_cb, viewport_width, viewport_height, font, doc);
         apply_relative_offset(b, available_width, viewport_height);
         return;
     }
···
     match &b.box_type {
         BoxType::Block(_) | BoxType::Anonymous => {
             if matches!(b.display, Display::Flex | Display::InlineFlex) {
-                layout_flex_children(b, viewport_height, font, doc);
+                layout_flex_children(b, viewport_width, viewport_height, font, doc, abs_cb);
             } else if has_block_children(b) {
-                layout_block_children(b, viewport_height, font, doc);
+                layout_block_children(b, viewport_width, viewport_height, font, doc, abs_cb);
             } else {
                 layout_inline_children(b, font, doc);
             }
···
         }
         LengthOrAuto::Auto => {}
     }
+
+    // Layout absolutely and fixed positioned children after this box's
+    // dimensions are fully resolved.
+    layout_abspos_children(b, abs_cb, viewport_width, viewport_height, font, doc);
 
     apply_relative_offset(b, available_width, viewport_height);
 }
···
     }
 }
 
+// ---------------------------------------------------------------------------
+// Absolute / fixed positioning
+// ---------------------------------------------------------------------------
+
+/// Resolve a `LengthOrAuto` offset to an optional pixel value.
+/// Returns `None` for `Auto` (offset not specified).
+fn resolve_offset(value: LengthOrAuto, reference: f32) -> Option<f32> {
+    match value {
+        LengthOrAuto::Length(px) => Some(px),
+        LengthOrAuto::Percentage(p) => Some(p / 100.0 * reference),
+        LengthOrAuto::Auto => None,
+    }
+}
+
+/// Compute the padding box rectangle for a layout box.
+fn padding_box_rect(b: &LayoutBox) -> Rect {
+    Rect {
+        x: b.rect.x - b.padding.left,
+        y: b.rect.y - b.padding.top,
+        width: b.rect.width + b.padding.left + b.padding.right,
+        height: b.rect.height + b.padding.top + b.padding.bottom,
+    }
+}
+
+/// Lay out all absolutely and fixed positioned children of `parent`.
+///
+/// `abs_cb` is the padding box of the nearest positioned ancestor passed from
+/// further up the tree. If `parent` itself is positioned (not `static`), its
+/// padding box becomes the new containing block for absolute descendants.
+fn layout_abspos_children(
+    parent: &mut LayoutBox,
+    abs_cb: Rect,
+    viewport_width: f32,
+    viewport_height: f32,
+    font: &Font,
+    doc: &Document,
+) {
+    let viewport_cb = Rect {
+        x: 0.0,
+        y: 0.0,
+        width: viewport_width,
+        height: viewport_height,
+    };
+
+    // If this box is positioned, it becomes the containing block for absolute
+    // descendants.
+    let new_abs_cb = if parent.position != Position::Static {
+        padding_box_rect(parent)
+    } else {
+        abs_cb
+    };
+
+    for i in 0..parent.children.len() {
+        if parent.children[i].position == Position::Absolute {
+            layout_absolute_child(
+                &mut parent.children[i],
+                new_abs_cb,
+                viewport_width,
+                viewport_height,
+                font,
+                doc,
+            );
+        } else if parent.children[i].position == Position::Fixed {
+            layout_absolute_child(
+                &mut parent.children[i],
+                viewport_cb,
+                viewport_width,
+                viewport_height,
+                font,
+                doc,
+            );
+        }
+    }
+}
+
+/// Lay out a single absolutely or fixed positioned element.
+///
+/// `cb` is the containing block (padding box of nearest positioned ancestor
+/// for absolute, or the viewport for fixed).
+fn layout_absolute_child(
+    child: &mut LayoutBox,
+    cb: Rect,
+    viewport_width: f32,
+    viewport_height: f32,
+    font: &Font,
+    doc: &Document,
+) {
+    let [css_top, css_right, css_bottom, css_left] = child.css_offsets;
+
+    // Resolve margins against containing block width.
+    child.margin = EdgeSizes {
+        top: resolve_length_against(child.css_margin[0], cb.width),
+        right: resolve_length_against(child.css_margin[1], cb.width),
+        bottom: resolve_length_against(child.css_margin[2], cb.width),
+        left: resolve_length_against(child.css_margin[3], cb.width),
+    };
+
+    // Resolve padding against containing block width.
+    child.padding = EdgeSizes {
+        top: resolve_length_against(child.css_padding[0], cb.width),
+        right: resolve_length_against(child.css_padding[1], cb.width),
+        bottom: resolve_length_against(child.css_padding[2], cb.width),
+        left: resolve_length_against(child.css_padding[3], cb.width),
+    };
+
+    let horiz_extra =
+        child.border.left + child.border.right + child.padding.left + child.padding.right;
+    let vert_extra =
+        child.border.top + child.border.bottom + child.padding.top + child.padding.bottom;
+
+    // Resolve offsets.
+    let left_offset = resolve_offset(css_left, cb.width);
+    let right_offset = resolve_offset(css_right, cb.width);
+    let top_offset = resolve_offset(css_top, cb.height);
+    let bottom_offset = resolve_offset(css_bottom, cb.height);
+
+    // --- Resolve content width ---
+    let content_width = match child.css_width {
+        LengthOrAuto::Length(w) => match child.box_sizing {
+            BoxSizing::ContentBox => w.max(0.0),
+            BoxSizing::BorderBox => (w - horiz_extra).max(0.0),
+        },
+        LengthOrAuto::Percentage(p) => {
+            let resolved = p / 100.0 * cb.width;
+            match child.box_sizing {
+                BoxSizing::ContentBox => resolved.max(0.0),
+                BoxSizing::BorderBox => (resolved - horiz_extra).max(0.0),
+            }
+        }
+        LengthOrAuto::Auto => {
+            // If both left and right are specified, stretch to fill.
+            if let (Some(l), Some(r)) = (left_offset, right_offset) {
+                (cb.width - l - r - child.margin.left - child.margin.right - horiz_extra).max(0.0)
+            } else {
+                // Use available width minus margins.
+                (cb.width - child.margin.left - child.margin.right - horiz_extra).max(0.0)
+            }
+        }
+    };
+
+    child.rect.width = content_width;
+
+    // --- Resolve horizontal position ---
+    child.rect.x = if let Some(l) = left_offset {
+        cb.x + l + child.margin.left + child.border.left + child.padding.left
+    } else if let Some(r) = right_offset {
+        cb.x + cb.width
+            - r
+            - child.margin.right
+            - child.border.right
+            - child.padding.right
+            - content_width
+    } else {
+        // Static position: containing block origin.
+        cb.x + child.margin.left + child.border.left + child.padding.left
+    };
+
+    // Set a temporary y for child content layout.
+    child.rect.y = cb.y;
+
+    // For overflow:scroll, reserve scrollbar width.
+    if child.overflow == Overflow::Scroll {
+        child.rect.width = (child.rect.width - SCROLLBAR_WIDTH).max(0.0);
+    }
+
+    // --- Layout child's own content ---
+    if let Some((rw, rh)) = child.replaced_size {
+        child.rect.width = rw.min(child.rect.width);
+        child.rect.height = rh;
+    } else {
+        let child_abs_cb = if child.position != Position::Static {
+            padding_box_rect(child)
+        } else {
+            cb
+        };
+        match &child.box_type {
+            BoxType::Block(_) | BoxType::Anonymous => {
+                if matches!(child.display, Display::Flex | Display::InlineFlex) {
+                    layout_flex_children(
+                        child,
+                        viewport_width,
+                        viewport_height,
+                        font,
+                        doc,
+                        child_abs_cb,
+                    );
+                } else if has_block_children(child) {
+                    layout_block_children(
+                        child,
+                        viewport_width,
+                        viewport_height,
+                        font,
+                        doc,
+                        child_abs_cb,
+                    );
+                } else {
+                    layout_inline_children(child, font, doc);
+                }
+            }
+            _ => {}
+        }
+    }
+
+    // Save natural content height.
+    child.content_height = child.rect.height;
+
+    // --- Resolve content height ---
+    match child.css_height {
+        LengthOrAuto::Length(h) => {
+            child.rect.height = match child.box_sizing {
+                BoxSizing::ContentBox => h.max(0.0),
+                BoxSizing::BorderBox => (h - vert_extra).max(0.0),
+            };
+        }
+        LengthOrAuto::Percentage(p) => {
+            let resolved = p / 100.0 * cb.height;
+            child.rect.height = match child.box_sizing {
+                BoxSizing::ContentBox => resolved.max(0.0),
+                BoxSizing::BorderBox => (resolved - vert_extra).max(0.0),
+            };
+        }
+        LengthOrAuto::Auto => {
+            // If both top and bottom are specified, stretch.
+            if let (Some(t), Some(b_val)) = (top_offset, bottom_offset) {
+                child.rect.height =
+                    (cb.height - t - b_val - child.margin.top - child.margin.bottom - vert_extra)
+                        .max(0.0);
+            }
+            // Otherwise keep content height.
+        }
+    }
+
+    // --- Resolve vertical position ---
+    let final_y = if let Some(t) = top_offset {
+        cb.y + t + child.margin.top + child.border.top + child.padding.top
+    } else if let Some(b_val) = bottom_offset {
+        cb.y + cb.height
+            - b_val
+            - child.margin.bottom
+            - child.border.bottom
+            - child.padding.bottom
+            - child.rect.height
+    } else {
+        // Static position: containing block origin.
+        cb.y + child.margin.top + child.border.top + child.padding.top
+    };
+
+    // Shift from temporary y to final y.
+    let dy = final_y - child.rect.y;
+    if dy != 0.0 {
+        shift_box(child, 0.0, dy);
+    }
+
+    // Recursively lay out any absolutely positioned grandchildren.
+    let new_abs_cb = if child.position != Position::Static {
+        padding_box_rect(child)
+    } else {
+        cb
+    };
+    layout_abspos_children(
+        child,
+        new_abs_cb,
+        viewport_width,
+        viewport_height,
+        font,
+        doc,
+    );
+}
+
 fn has_block_children(b: &LayoutBox) -> bool {
-    b.children.iter().any(is_block_level)
+    b.children
+        .iter()
+        .any(|c| is_in_flow(c) && is_block_level(c))
 }
 
 /// Collapse two adjoining margins per CSS2 §8.3.1.
···
 /// value.  The function walks bottom-up: children are pre-collapsed first, then
 /// their (possibly enlarged) margins are folded into the parent.
 fn pre_collapse_margins(b: &mut LayoutBox) {
-    // Recurse into block children first (bottom-up).
+    // Recurse into in-flow block children first (bottom-up).
     for child in &mut b.children {
-        if is_block_level(child) {
+        if is_in_flow(child) && is_block_level(child) {
             pre_collapse_margins(child);
         }
     }
···
     }
 }
 
-/// Top margin of the first non-empty block child (already pre-collapsed).
+/// Top margin of the first non-empty in-flow block child (already pre-collapsed).
 fn first_block_top_margin(children: &[LayoutBox]) -> Option<f32> {
     for child in children {
-        if is_block_level(child) {
+        if is_in_flow(child) && is_block_level(child) {
             if is_empty_block(child) {
                 continue;
             }
             return Some(child.margin.top);
         }
     }
-    // All block children empty — fold all their collapsed margins.
+    // All in-flow block children empty — fold all their collapsed margins.
     let mut m = 0.0f32;
-    for child in children.iter().filter(|c| is_block_level(c)) {
+    for child in children
+        .iter()
+        .filter(|c| is_in_flow(c) && is_block_level(c))
+    {
         m = collapse_margins(m, collapse_margins(child.margin.top, child.margin.bottom));
     }
     if m != 0.0 {
···
     }
 }
 
-/// Bottom margin of the last non-empty block child (already pre-collapsed).
+/// Bottom margin of the last non-empty in-flow block child (already pre-collapsed).
 fn last_block_bottom_margin(children: &[LayoutBox]) -> Option<f32> {
     for child in children.iter().rev() {
-        if is_block_level(child) {
+        if is_in_flow(child) && is_block_level(child) {
             if is_empty_block(child) {
                 continue;
             }
···
         }
     }
     let mut m = 0.0f32;
-    for child in children.iter().filter(|c| is_block_level(c)) {
+    for child in children
+        .iter()
+        .filter(|c| is_in_flow(c) && is_block_level(c))
+    {
         m = collapse_margins(m, collapse_margins(child.margin.top, child.margin.bottom));
     }
     if m != 0.0 {
···
 /// updated by `pre_collapse_margins`).
 fn layout_block_children(
     parent: &mut LayoutBox,
+    viewport_width: f32,
     viewport_height: f32,
     font: &Font,
     doc: &Document,
+    abs_cb: Rect,
 ) {
     let content_x = parent.rect.x;
     let content_width = parent.rect.width;
···
     // Pending bottom margin from the previous sibling.
     let mut pending_margin: Option<f32> = None;
     let child_count = parent.children.len();
+    // Track whether we've seen any in-flow children (for parent_top_open).
+    let mut first_in_flow = true;
 
     for i in 0..child_count {
+        // Skip out-of-flow children (absolute/fixed) — they are laid out
+        // separately in layout_abspos_children.
+        if !is_in_flow(&parent.children[i]) {
+            continue;
+        }
+
         let child_top_margin = parent.children[i].margin.top;
         let child_bottom_margin = parent.children[i].margin.bottom;
 
···
                 - child.padding.right)
                 .max(0.0);
             child.rect.height = 0.0;
+            first_in_flow = false;
             continue;
         }
 
···
         let collapsed_top = if let Some(prev_bottom) = pending_margin.take() {
             // Sibling collapsing: previous bottom vs this top.
             collapse_margins(prev_bottom, child_top_margin)
-        } else if i == 0 && parent_top_open {
+        } else if first_in_flow && parent_top_open {
             // First child, parent top open: margin was already pulled into
             // parent by pre_collapse_margins — no internal spacing.
             0.0
···
             content_x,
             y_for_child,
             content_width,
+            viewport_width,
             viewport_height,
             font,
             doc,
+            abs_cb,
         );
 
         let child = &parent.children[i];
···
             + child.padding.bottom
             + child.border.bottom;
         pending_margin = Some(child_bottom_margin);
+        first_in_flow = false;
     }
 
     // Trailing margin.
···
 }
 
 /// Lay out children according to the CSS Flexbox algorithm (Level 1 §9).
-fn layout_flex_children(parent: &mut LayoutBox, viewport_height: f32, font: &Font, doc: &Document) {
+fn layout_flex_children(
+    parent: &mut LayoutBox,
+    viewport_width: f32,
+    viewport_height: f32,
+    font: &Font,
+    doc: &Document,
+    abs_cb: Rect,
+) {
     let flex_direction = parent.flex_direction;
     let flex_wrap = parent.flex_wrap;
     let justify_content = parent.justify_content;
···
     let mut items: Vec<FlexItemInfo> = Vec::with_capacity(child_count);
 
     for &idx in &order_indices {
+        // Skip out-of-flow children (absolute/fixed).
+        if !is_in_flow(&parent.children[idx]) {
+            continue;
+        }
         let child = &mut parent.children[idx];
 
         // Resolve margin/padding percentages for the child.
···
                         } else {
                             // For column direction, measure content height.
                             let avail = container_cross_size.unwrap_or(parent.rect.width);
-                            compute_layout(child, 0.0, 0.0, avail, viewport_height, font, doc);
+                            compute_layout(
+                                child,
+                                0.0,
+                                0.0,
+                                avail,
+                                viewport_width,
+                                viewport_height,
+                                font,
+                                doc,
+                                abs_cb,
+                            );
                             child.rect.height
                         }
                     }
···
             // Set up the child for layout at the resolved main size.
             if is_row {
                 child.css_width = LengthOrAuto::Length(target_main);
-                compute_layout(child, 0.0, 0.0, target_main, viewport_height, font, doc);
+                compute_layout(
+                    child,
+                    0.0,
+                    0.0,
+                    target_main,
+                    viewport_width,
+                    viewport_height,
+                    font,
+                    doc,
+                    abs_cb,
+                );
                 let cross = child.rect.height + items[i].outer_cross;
                 if cross > max_cross {
                     max_cross = cross;
                 }
             } else {
                 let avail = container_cross_size.unwrap_or(parent.rect.width);
-                compute_layout(child, 0.0, 0.0, avail, viewport_height, font, doc);
+                compute_layout(
+                    child,
+                    0.0,
+                    0.0,
+                    avail,
+                    viewport_width,
+                    viewport_height,
+                    font,
+                    doc,
+                    abs_cb,
+                );
                 child.rect.height = target_main;
                 let cross = child.rect.width
                     + child.border.left
···
 /// Flatten the inline children tree into a sequence of items.
 fn flatten_inline_tree(children: &[LayoutBox], doc: &Document, items: &mut Vec<InlineItemKind>) {
     for child in children {
+        // Skip out-of-flow children (absolute/fixed positioned).
+        if !is_in_flow(child) {
+            continue;
+        }
         match &child.box_type {
             BoxType::TextRun { text, .. } => {
                 let words = split_into_words(text);
···
     // Pre-collapse parent-child margins before positioning.
     pre_collapse_margins(&mut root);
 
+    // The initial containing block for absolutely positioned elements is the viewport.
+    let viewport_cb = Rect {
+        x: 0.0,
+        y: 0.0,
+        width: viewport_width,
+        height: viewport_height,
+    };
     compute_layout(
         &mut root,
         0.0,
         0.0,
         viewport_width,
+        viewport_width,
         viewport_height,
         font,
         doc,
+        viewport_cb,
     );
 
     let height = root.margin_box_height();
···
                 child.rect.width
             );
         }
+    }
+
+    // -----------------------------------------------------------------------
+    // Absolute positioning tests
+    // -----------------------------------------------------------------------
+
+    /// Helper to create: <html><body>...content...</body></html> and return
+    /// (doc, html_id, body_id).
+    fn make_html_body(doc: &mut Document) -> (NodeId, NodeId, NodeId) {
+        let root = doc.root();
+        let html = doc.create_element("html");
+        let body = doc.create_element("body");
+        doc.append_child(root, html);
+        doc.append_child(html, body);
+        (root, html, body)
+    }
+
+    #[test]
+    fn absolute_positioned_with_top_left() {
+        let mut doc = Document::new();
+        let (_, _, body) = make_html_body(&mut doc);
+        // <div style="position: relative; width: 400px; height: 300px;">
+        //   <div style="position: absolute; top: 10px; left: 20px; width: 100px; height: 50px;"></div>
+        // </div>
+        let container = doc.create_element("div");
+        let abs_child = doc.create_element("div");
+        doc.append_child(body, container);
+        doc.append_child(container, abs_child);
+        doc.set_attribute(
+            container,
+            "style",
+            "position: relative; width: 400px; height: 300px;",
+        );
+        doc.set_attribute(
+            abs_child,
+            "style",
+            "position: absolute; top: 10px; left: 20px; width: 100px; height: 50px;",
+        );
+
+        let tree = layout_doc(&doc);
+        let body_box = &tree.root.children[0];
+        let container_box = &body_box.children[0];
+        let abs_box = &container_box.children[0];
+
+        assert_eq!(abs_box.position, Position::Absolute);
+        assert_eq!(abs_box.rect.width, 100.0);
+        assert_eq!(abs_box.rect.height, 50.0);
+
+        // The containing block is the container's padding box.
+        // Container content starts at container_box.rect.x, container_box.rect.y.
+        // Padding box x = container_box.rect.x - container_box.padding.left.
+        let cb_x = container_box.rect.x - container_box.padding.left;
+        let cb_y = container_box.rect.y - container_box.padding.top;
+
+        // abs_box content area x = cb_x + 20 (left) + 0 (margin) + 0 (border) + 0 (padding)
+        assert!(
+            (abs_box.rect.x - (cb_x + 20.0)).abs() < 0.01,
+            "abs x should be cb_x + 20, got {} (cb_x={})",
+            abs_box.rect.x,
+            cb_x,
+        );
+        assert!(
+            (abs_box.rect.y - (cb_y + 10.0)).abs() < 0.01,
+            "abs y should be cb_y + 10, got {} (cb_y={})",
+            abs_box.rect.y,
+            cb_y,
+        );
+    }
+
+    #[test]
+    fn absolute_does_not_affect_sibling_layout() {
+        let mut doc = Document::new();
+        let (_, _, body) = make_html_body(&mut doc);
+        // <div style="position: relative;">
+        //   <div style="position: absolute; top: 0; left: 0; width: 100px; height: 100px;"></div>
+        //   <p>Normal text</p>
+        // </div>
+        let container = doc.create_element("div");
+        let abs_child = doc.create_element("div");
+        let p = doc.create_element("p");
+        let text = doc.create_text("Normal text");
+        doc.append_child(body, container);
+        doc.append_child(container, abs_child);
+        doc.append_child(container, p);
+        doc.append_child(p, text);
+        doc.set_attribute(container, "style", "position: relative;");
+        doc.set_attribute(
+            abs_child,
+            "style",
+            "position: absolute; top: 0; left: 0; width: 100px; height: 100px;",
+        );
+
+        let tree = layout_doc(&doc);
+        let body_box = &tree.root.children[0];
+        let container_box = &body_box.children[0];
+
+        // The <p> should start at the top of the container (abs child doesn't
+        // push it down). Find the first in-flow child.
+        let p_box = container_box
+            .children
+            .iter()
+            .find(|c| c.position != Position::Absolute && c.position != Position::Fixed)
+            .expect("should have an in-flow child");
+
+        // p's y should be at (or very near) the container's content y.
+        let expected_y = container_box.rect.y;
+        assert!(
+            (p_box.rect.y - expected_y).abs() < 1.0,
+            "p should start near container top: p.y={}, expected={}",
+            p_box.rect.y,
+            expected_y,
+        );
+    }
+
+    #[test]
+    fn fixed_positioned_relative_to_viewport() {
+        let mut doc = Document::new();
+        let (_, _, body) = make_html_body(&mut doc);
+        // <div style="position: fixed; top: 5px; left: 10px; width: 50px; height: 30px;"></div>
+        let fixed = doc.create_element("div");
+        doc.append_child(body, fixed);
+        doc.set_attribute(
+            fixed,
+            "style",
+            "position: fixed; top: 5px; left: 10px; width: 50px; height: 30px;",
+        );
+
+        let tree = layout_doc(&doc);
+        let body_box = &tree.root.children[0];
+        let fixed_box = &body_box.children[0];
+
+        assert_eq!(fixed_box.position, Position::Fixed);
+        assert_eq!(fixed_box.rect.width, 50.0);
+        assert_eq!(fixed_box.rect.height, 30.0);
+
+        // Fixed should be relative to viewport (0,0).
+        assert!(
+            (fixed_box.rect.x - 10.0).abs() < 0.01,
+            "fixed x should be 10, got {}",
+            fixed_box.rect.x,
+        );
+        assert!(
+            (fixed_box.rect.y - 5.0).abs() < 0.01,
+            "fixed y should be 5, got {}",
+            fixed_box.rect.y,
+        );
+    }
+
+    #[test]
+    fn z_index_ordering() {
+        let mut doc = Document::new();
+        let (_, _, body) = make_html_body(&mut doc);
+        // Create a positioned container with two abs children at different z-index.
+        let container = doc.create_element("div");
+        let low = doc.create_element("div");
+        let high = doc.create_element("div");
+        doc.append_child(body, container);
+        doc.append_child(container, low);
+        doc.append_child(container, high);
+        doc.set_attribute(
+            container,
+            "style",
+            "position: relative; width: 200px; height: 200px;",
+        );
+        doc.set_attribute(
+            low,
+            "style",
+            "position: absolute; z-index: 1; top: 0; left: 0; width: 50px; height: 50px;",
+        );
+        doc.set_attribute(
+            high,
+            "style",
+            "position: absolute; z-index: 5; top: 0; left: 0; width: 50px; height: 50px;",
+        );
+
+        let tree = layout_doc(&doc);
+        let body_box = &tree.root.children[0];
+        let container_box = &body_box.children[0];
+
+        // Both should have correct z-index stored.
+        let low_box = &container_box.children[0];
+        let high_box = &container_box.children[1];
+        assert_eq!(low_box.z_index, Some(1));
+        assert_eq!(high_box.z_index, Some(5));
+    }
+
+    #[test]
+    fn absolute_stretching_left_right() {
+        let mut doc = Document::new();
+        let (_, _, body) = make_html_body(&mut doc);
+        // <div style="position: relative; width: 400px; height: 300px;">
+        //   <div style="position: absolute; left: 10px; right: 20px; height: 50px;"></div>
+        // </div>
+        let container = doc.create_element("div");
+        let abs_child = doc.create_element("div");
+        doc.append_child(body, container);
+        doc.append_child(container, abs_child);
+        doc.set_attribute(
+            container,
+            "style",
+            "position: relative; width: 400px; height: 300px;",
+        );
+        doc.set_attribute(
+            abs_child,
+            "style",
+            "position: absolute; left: 10px; right: 20px; height: 50px;",
+        );
+
+        let tree = layout_doc(&doc);
+        let body_box = &tree.root.children[0];
+        let container_box = &body_box.children[0];
+        let abs_box = &container_box.children[0];
+
+        // Width should be: container_width - left - right = 400 - 10 - 20 = 370
+        assert!(
+            (abs_box.rect.width - 370.0).abs() < 0.01,
+            "stretched width should be 370, got {}",
+            abs_box.rect.width,
+        );
+    }
+
+    #[test]
+    fn absolute_bottom_right_positioning() {
+        let mut doc = Document::new();
+        let (_, _, body) = make_html_body(&mut doc);
+        // <div style="position: relative; width: 400px; height: 300px;">
+        //   <div style="position: absolute; bottom: 10px; right: 20px; width: 50px; height: 30px;"></div>
+        // </div>
+        let container = doc.create_element("div");
+        let abs_child = doc.create_element("div");
+        doc.append_child(body, container);
+        doc.append_child(container, abs_child);
+        doc.set_attribute(
+            container,
+            "style",
+            "position: relative; width: 400px; height: 300px;",
+        );
+        doc.set_attribute(
+            abs_child,
+            "style",
+            "position: absolute; bottom: 10px; right: 20px; width: 50px; height: 30px;",
+        );
+
+        let tree = layout_doc(&doc);
+        let body_box = &tree.root.children[0];
+        let container_box = &body_box.children[0];
+        let abs_box = &container_box.children[0];
+
+        let cb_x = container_box.rect.x - container_box.padding.left;
+        let cb_y = container_box.rect.y - container_box.padding.top;
+        let cb_w =
+            container_box.rect.width + container_box.padding.left + container_box.padding.right;
+        let cb_h =
+            container_box.rect.height + container_box.padding.top + container_box.padding.bottom;
+
+        // x = cb_x + cb_w - right - width = cb_x + cb_w - 20 - 50
+        let expected_x = cb_x + cb_w - 20.0 - 50.0;
+        // y = cb_y + cb_h - bottom - height = cb_y + cb_h - 10 - 30
+        let expected_y = cb_y + cb_h - 10.0 - 30.0;
+
+        assert!(
+            (abs_box.rect.x - expected_x).abs() < 0.01,
+            "abs x with right should be {}, got {}",
+            expected_x,
+            abs_box.rect.x,
+        );
+        assert!(
+            (abs_box.rect.y - expected_y).abs() < 0.01,
+            "abs y with bottom should be {}, got {}",
+            expected_y,
+            abs_box.rect.y,
+        );
     }
 }

crates/render/src/lib.rs

···
 use we_dom::NodeId;
 use we_image::pixel::Image;
 use we_layout::{BoxType, LayoutBox, LayoutTree, Rect, TextLine, SCROLLBAR_WIDTH};
-use we_style::computed::{BorderStyle, Overflow, TextDecoration, Visibility};
+use we_style::computed::{BorderStyle, Overflow, Position, TextDecoration, Visibility};
 use we_text::font::Font;
 
 /// Scroll state: maps NodeId of scrollable boxes to their (scroll_x, scroll_y) offsets.
···
     list
 }
 
+/// Returns `true` if a box is positioned (absolute or fixed).
+fn is_positioned(b: &LayoutBox) -> bool {
+    b.position == Position::Absolute || b.position == Position::Fixed
+}
+
 fn paint_box(
     layout_box: &LayoutBox,
     list: &mut DisplayList,
···
         }
     }
 
-    // Always recurse into children — they may override visibility.
-    for child in &layout_box.children {
-        paint_box(child, list, child_translate, scroll_state);
+    // Check if any children are positioned (absolute/fixed).
+    let has_positioned = layout_box.children.iter().any(is_positioned);
+
+    if has_positioned {
+        // CSS stacking context ordering:
+        // 1. Positioned children with negative z-index
+        // 2. In-flow (non-positioned) children in tree order
+        // 3. Positioned children with z-index >= 0 (or auto) in z-index order
+
+        // Collect positioned children indices, partitioned by z-index sign.
+        let mut negative_z: Vec<usize> = Vec::new();
+        let mut non_negative_z: Vec<usize> = Vec::new();
+
+        for (i, child) in layout_box.children.iter().enumerate() {
+            if is_positioned(child) {
+                let z = child.z_index.unwrap_or(0);
+                if z < 0 {
+                    negative_z.push(i);
+                } else {
+                    non_negative_z.push(i);
+                }
+            }
+        }
+
+        // Sort by z-index (stable sort preserves tree order for equal z-index).
+        negative_z.sort_by_key(|&i| layout_box.children[i].z_index.unwrap_or(0));
+        non_negative_z.sort_by_key(|&i| layout_box.children[i].z_index.unwrap_or(0));
+
+        // Paint negative z-index positioned children.
+        for &i in &negative_z {
+            paint_box(&layout_box.children[i], list, child_translate, scroll_state);
+        }
+
+        // Paint in-flow children in tree order.
+        for child in &layout_box.children {
+            if !is_positioned(child) {
+                paint_box(child, list, child_translate, scroll_state);
+            }
+        }
+
+        // Paint non-negative z-index positioned children.
+        for &i in &non_negative_z {
+            paint_box(&layout_box.children[i], list, child_translate, scroll_state);
+        }
+    } else {
+        // No positioned children — paint all in tree order.
+        for child in &layout_box.children {
+            paint_box(child, list, child_translate, scroll_state);
+        }
     }
 
     if clips {

crates/style/src/computed.rs

···
     pub right: LengthOrAuto,
     pub bottom: LengthOrAuto,
     pub left: LengthOrAuto,
+    pub z_index: Option<i32>,
 
     // Overflow
     pub overflow: Overflow,
···
             right: LengthOrAuto::Auto,
             bottom: LengthOrAuto::Auto,
             left: LengthOrAuto::Auto,
+            z_index: None,
 
             overflow: Overflow::Visible,
             visibility: Visibility::Visible,
···
         "right" => style.right = resolve_layout_length_or_auto(value, current_fs, viewport),
         "bottom" => style.bottom = resolve_layout_length_or_auto(value, current_fs, viewport),
         "left" => style.left = resolve_layout_length_or_auto(value, current_fs, viewport),
+
+        // z-index
+        "z-index" => {
+            style.z_index = match value {
+                CssValue::Number(n) => Some(*n as i32),
+                CssValue::Keyword(k) if k == "auto" => None,
+                _ => style.z_index,
+            };
+        }
 
         // Overflow
         "overflow" => {
···
         let child = &parent.children[0];
         assert_eq!(parent.style.box_sizing, BoxSizing::BorderBox);
         assert_eq!(child.style.box_sizing, BoxSizing::ContentBox);
+    }
+
+    #[test]
+    fn z_index_parsing() {
+        let html_str = r#"<!DOCTYPE html>
+<html><head><style>
+.a { z-index: 5; }
+.b { z-index: -3; }
+.c { z-index: auto; }
+</style></head>
+<body>
+<div class="a">A</div>
+<div class="b">B</div>
+<div class="c">C</div>
+</body></html>"#;
+        let doc = we_html::parse_html(html_str);
+        let sheets = extract_stylesheets(&doc);
+        let styled = resolve_styles(&doc, &sheets, (800.0, 600.0)).unwrap();
+        let body = &styled.children[0];
+        let a = &body.children[0];
+        let b = &body.children[1];
+        let c = &body.children[2];
+        assert_eq!(a.style.z_index, Some(5));
+        assert_eq!(b.style.z_index, Some(-3));
+        assert_eq!(c.style.z_index, None);
+    }
+
+    #[test]
+    fn z_index_default_is_auto() {
+        let html_str = r#"<!DOCTYPE html>
+<html><body><div>test</div></body></html>"#;
+        let doc = we_html::parse_html(html_str);
+        let sheets = extract_stylesheets(&doc);
+        let styled = resolve_styles(&doc, &sheets, (800.0, 600.0)).unwrap();
+        let body = &styled.children[0];
+        let div = &body.children[0];
+        assert_eq!(div.style.z_index, None);
     }
 }