Web Tools tools.bryantsmith.com

Creative Workflow Helpers

CSS Stacking Context Explorer

Describe a few overlapping elements and see which one paints on top — and exactly why. The explorer models stacking contexts, z-index layers and document order so you can untangle “why is my dropdown behind the modal?” in seconds. Everything runs in your browser.

Runs in your browser No account needed v1.0.0

1. Build the scene

Each card is one element. Set position and z-index first; open Advanced for the other properties that create stacking contexts. Nest elements with the Parent menu to reproduce a real bug.

2. Live paint preview

back to front

Boxes use the computed paint order as their CSS z-index. The box painted last sits on top. Select a box to compare it.

3. Result

Paint order (front to back)

    How it works

    The explorer walks your element tree, marks every node that creates a stacking context (positioned z-index, opacity below 1, transform, filter, isolation, mix-blend-mode, will-change, contain, and flex/grid items with a z-index), then paints the scene using the CSS painting algorithm: negative z-index contexts, in-flow content, z-index auto / 0, then positive z-index contexts. It is an educational model, not a full browser engine, so geometry and stacking within the same layer are simplified to document order.

    Related tools

    • .env Compare & MergeCompare development, staging, and production .env key sets without exposing secret values, then build a merged template.
    • Accessible Name CalculatorPaste HTML, pick an element, and see the accessible name assistive technology computes — entirely in your browser.
    • Apache Rewrite TesterTest Apache mod_rewrite rules against a sample request path and see the rewritten URL, redirects, captures and warnings.
    • Cookie Builder & InspectorBuild a Set-Cookie header or paste one to inspect its expiry, path, domain, Secure, HttpOnly and SameSite attributes — entirely in your browser.
    • CORS Header Builder & ExplainerModel a cross-origin request and get the exact CORS response headers to send, explained in plain language.
    • CSP AnalyzerPaste a Content-Security-Policy to flag risky, redundant, contradictory, and commonly misunderstood directives — entirely in your browser.

    More Creative Workflow Helpers tools