Free Online Z-Index Debugger & Stacking Context Visualizer

Overview

A browser-based interactive laboratory for developers to construct nested HTML layouts and visually debug CSS stacking contexts. This tool simplifies the complex "z-index hell" by providing a visual hierarchy of elements, identifying parent/child stacking relationships, and explaining why specific elements are layered above or below others.

Core Features

• Interactive Canvas: A drag-and-drop or click-to-add interface to create nested <div> blocks.
• Property Editor: A sidebar panel to modify CSS properties that influence stacking (position, z-index, opacity, transform, filter, perspective).
• Stacking Tree Visualization: An automated, real-time tree view that highlights which elements create new stacking contexts (e.g., elements with opacity < 1 or transform: scale()).
• Live Z-Index Explanation: A "Why am I here?" module that provides a human-readable explanation of why a selected element is visible or hidden behind others.
• Code Snippet Generator: Generates the corresponding HTML and CSS for the created layout.
• Responsive Preview: Adjust the size of the container to test how stacking reacts to layout changes.

UI Layout

• Header: Clean, minimalist navigation with the app title and a "Reset" button.
• Main Content Area:
  • Left Sidebar: Property controls (Inputs for z-index, dropdowns for position, toggle switches for transform, opacity, etc.).
  • Center Canvas: The visual playground where rectangles are rendered dynamically. Includes a visual indicator (colored borders) for stacking context boundaries.
  • Right Sidebar: The "Context Inspector" tree, displaying the parent-child relationship of the current stacking hierarchy.

Design & Aesthetics

• Palette: High-key light aesthetic. Background: #F8FAFC. Primary accents: #2563EB (Blue). Success states: #059669 (Green). Danger states: #DC2626 (Red). Neutrals: #E2E8F0 to #64748B.
• Typography: Inter or System UI fonts, bold weights for labels, monospaced fonts for property values.
• Transitions: Smooth layout shifts using CSS transition: all 0.3s ease-in-out when elements are moved or properties are updated. Micro-interactions when hovering over elements to highlight their stacking boundary.

Technical Constraints & Requirements

• Single-File Architecture: All HTML, CSS, and JS must be embedded in one file. No build steps.
• Sandbox Compatibility: Do NOT use localStorage, sessionStorage, or cookies. The state must be maintained in a standard JavaScript object/array in memory.
• Vanilla JS Only: No external frameworks (React/Vue/Angular). Use native DOM manipulation (document.createElement, classList, etc.).
• No External Alerts: Use custom modal components (hidden by default, toggled via CSS classes) instead of alert(), confirm(), or prompt().
• Responsive Design: Use CSS Flexbox/Grid to ensure the three-column layout collapses gracefully on mobile devices (e.g., vertical stack on small screens).
• Safety: All external links must include target="_blank" and rel="noopener noreferrer".