Z-index
z-index is a CSS property that determines the stacking order of overlapping elements within a stacking context.
Web Design Playground, Second Edition
The CSS z-index property assigns a stacking order to positioned elements, determining which elements appear in front of or behind others.
- How it is used
- Controls which overlapping positioned element appears in front or behind.
- How deep it goes
- Defines stacking contexts, compares higher and lower values, and explains a negative descendant value without deeper rendering internals.
- Examples
- Uses layered headings, divs, spans, and strong text, plus a before-and-after portfolio image overlay.
- What you can do after
- Apply it via CSS positioning to layer an image overlay above a base image.
Read how Web Design Playground, Second Edition explains z-index →
CSS in Depth, Second Edition
The z-index property specifies the stacking order of a positioned or stacking-context element.
- How it is used
- Controls overlapping interface layers such as dropdowns, backdrops, and modal content.
- How deep it goes
- Explains integer ordering, positioning constraints, stacking contexts, and nested-context limits through worked examples.
- Examples
- Uses a modal backdrop and body, overlapping boxes, a nested absolute element, and a named layer scale.
- What you can do after
- Diagnose stacking conflicts with browser developer tools and assign deliberate z-index values to positioned layers.
Related concepts
- stacking contextproduces · A stacking context is an isolated CSS rendering context in which an element and its descendants are composited within the surrounding stacking order.
- positioned elementuses · A positioned element is an element whose position property establishes a positioning mode that allows offset and stacking behavior beyond normal flow.
- strong elementconfigures · The HTML strong element marks content as having strong importance, seriousness, or urgency.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.