CSS Z-Index builder

The preview stacks real DOM elements, so the order you see is the order a browser would actually paint, not a sorted list. What this tool does not model: stacking contexts. A positive z-index on an element inside a parent that has opacity below 1, a transform, a filter, or isolation will not jump above that parent's siblings, because the parent's context traps it. None of those properties appear here, so the generated CSS behaves the same outside the preview as inside it. Equal z-indexes paint in DOM order, later on top, and a negative z-index slips behind the background of its own stacking context.