Positioning Overlapping Div Layers with CSS z-index
The stacking order or position of floating div layers can be controlled with the css z-index. This is the same example of previous HTML div layer tutorial. By positioning the css z-index, the stacking order of div layers can be changed easily. The following example demonstrate how to change the stacking order of float div layers.
div layer id "layer2" with z-index 1
Rule of Div Layer CSS z-index Positioning
Div layer with a higher z-index number overlaps a Div layer with a lowerz-index number. For example, a Div layer with z-index 8 will float over div layer with z-index smaller than 8 (e.g. 7, 6, 5, etc.)
Change Stacking Order of Floating Div Layers with CSS z-index Positioning
In previous div layer tutorial, div "layer 1" is floating below div "layer 2". By changing the css z-index of these two div layers, div "layer 1" is now floating above div "layer 2".
Div Layer "layer 1" CSS z-index Setting:
Change the z-index from 1 to 2.
Div Layer "layer 2" CSS z-index Setting:
Change the z-index from 2 to 1
CSS z-index Positioning Result:
The z-index of Div layer "layer 1" is 2.
The z-index of Div layer "layer 2" is 1.
The z-index of Div layer "layer 1" is higher than "layer 2". Therefore "layer 1" will float over "layer 2"
CSS Div Layers Codes
#outerWrap {
position: relative;
z-index: 0;
background-color: #00CCFF;
height: 400px;
width: 650px;
}
#layer1 {
position: absolute;
z-index: 2;
background-color: #6F0;
height: 250px;
width: 350px;
top: 40px;
left: 40px;
}
#layer2 {
position: absolute;
z-index: 1;
background-color: #FC0;
height: 250px;
width: 350px;
top: 120px;
left: 260px;
}
HTML CSS Tutorial contents: How to change overlapping order of floating div layers with z-index positioning.
