How It Works

The tool is built around a simple idea: you provide the markup and styles, and the preview renders them in an isolated frame so you can experiment without affecting the rest of the page. Alongside the preview, the sandbox scans for elements that are likely to participate in layering—positioned elements, elements with non-auto z-index, and elements that commonly create stacking contexts (such as those with transforms or opacity).

Step-by-step workflow

• 1) Paste or edit HTML: Add the elements you want to test (e.g., a header, dropdown menu, modal, tooltip, or fixed CTA).
• 2) Paste or edit CSS: Include positioning rules, z-index values, and any properties that might create stacking contexts.
• 3) Adjust viewport size: Set a width and height to simulate a container, a device screen, or a constrained layout.
• 4) Inspect layering hints: Review the “Layer Candidates” list for a quick view of positions, z-index values, and common stacking-context triggers.
• 5) Export: Copy or download a single HTML file that includes your snippet and styles—perfect for sharing a reproducible example.

Key Features

Isolated preview sandbox

Your snippet renders in a dedicated preview frame so you can focus on the layering problem without external layout noise. This makes it easier to spot which element actually sits “on top” and which one is being clipped or stuck under a stacking context.

Layer Candidates list

The sandbox surfaces elements that commonly affect stacking: positioned elements, non-auto z-index values, and properties that often form stacking contexts. It’s not a full browser devtools replacement, but it’s an excellent first pass to narrow down where to look.

Clickable highlighting

Click a candidate in the list to highlight the corresponding element in the preview. This is especially useful when you have several overlapping panels or repeated components with similar class names.

Debug outlines toggle

Turn on optional debug outlines to visualize element boundaries quickly. When diagnosing overlap issues, seeing the “real” box of a dropdown, tooltip, or sticky header often reveals that a parent container is clipping content or that a sibling is larger than expected.

Exportable minimal repro

Copy or download a standalone HTML document that contains your HTML and CSS. A minimal reproducible example helps you get faster help, whether you’re asking a colleague, posting on an issue tracker, or confirming behavior across browsers.

Use Cases

• Dropdown behind header: Recreate a navbar with a dropdown that disappears under a sticky header, then test whether the header forms a stacking context or if z-index is applied to the correct element.
• Modal trapped in a transformed parent: Many animations add transform to containers, which can trap fixed or absolute children in a new stacking context. Use the sandbox to confirm and redesign the structure.
• Tooltip clipped by overflow: If a tooltip is cut off, the culprit is often overflow: hidden on a parent. The sandbox helps you isolate the container relationship and decide whether to portal the tooltip or adjust overflow.
• Sticky elements misbehaving: Sticky headers and sidebars depend on scroll containers and can interact with z-index in surprising ways. Test sticky + z-index combinations with a controlled viewport.
• Component library debugging: When integrating third-party components (menus, popovers, date pickers), you may need to understand how their containers and z-index scales behave. Build a tiny reproduction and find the smallest CSS change that resolves it.

In practice, the best debugging comes from isolating variables. A focused sandbox makes it easier to see whether the issue is z-index itself, a new stacking context, clipping from overflow, or even DOM order.

Optimization Tips

Work from the “lowest” stacking context upward

When something won’t appear on top, the problem is often not the z-index value on the element you’re editing. Instead, a parent (or sibling) has created a new stacking context. In the sandbox, try removing properties such as transform, opacity, or filter from parents one at a time to see when the element “escapes.”

Apply z-index to positioned elements only

Z-index typically requires a positioned element (position: relative, absolute, fixed, or sticky). If your element is position: static, the z-index may be ignored. In the tool, toggle position rules and confirm the computed styles for the element you want to layer.

Prefer a consistent z-index scale

Large values like 9999 can hide deeper structural issues. Consider defining a small, documented z-index scale for your project (e.g., base content, sticky, dropdown, modal, toast). The sandbox is useful for validating that your scale works when components interact.

FAQ