The first article of this guide, Stacking without the z-index property, explains how stacking is arranged by default. If you want to create a custom stacking order, you can use the z-index
property on a positioned element.
The z-index
property can be specified with an integer value (positive, zero, or negative), which represents the position of the element along an imaginary z-axis. If you are not familiar with the term 'z-axis', imagine the page as a stack of layers, each one having a number. Layers are rendered in numerical order, with larger numbers above smaller numbers (X represents an arbitrary positive integer):
Layer | Description |
---|---|
Bottom layer | Farthest from the observer |
Layer -X | Layers with negative z-index values |
Layer 0 | Default rendering layer |
Layer X | Layers with positive z-index values |
Top layer | Closest to the observer |
Note:
- When no
z-index
property is specified, elements are rendered on the default rendering layer (Layer 0). - If several elements share the same
z-index
value (i.e., they are placed on the same layer), stacking rules explained in the section Stacking without the z-index property apply.