CSS: z-index
z-index
controls the stacked layer order, of overlapping elements.
- Default to 0
- Value can be 0 or negative, or positive.
- Larger value are in front.
The “z-index” is meaningful only for elements that has one of:
position:absolute
position:relative
position:fixed
[see CSS: Position Property]
Example
Scroll around and look at the page, there are 2 overlapping boxes, box 1 and box 2. Their positions are fixed relative to the window.
Both have position:fixed
.
One of them has larger
z-index
than the other, so it's in front.
BOX A
BOX B
Here is the code:
<div id="boxA3790">BOX A</div> <div id="boxB7452">BOX B</div>
#boxA3790, #boxB7452 { width:80px; height:80px; position:fixed; color:black; } #boxA3790 { top:300px; right:20px; z-index:5; background-color:salmon; } #boxB7452 { top:320px; right:0px; z-index:6; background-color:gold; }
CSS Layout
- Display Property
- Pure CSS Table
- CSS: 3-Column Side-Panels Layout
- CSS: Newspaper Multi-Column Layout
- CSS: Text Flow Around Image
- Hide Element (visibility)
CSS Layers
- Position Property
- Fix Element to Window
- Position: Relative
- Absolute Position
Text Over Image- z-index