HTML CSS Div Layer Tutorials | Affordable Web Hosting Home

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 "outerWrap" with z-index 0
div layer id "layer1" with z-index 2

 

 

 

 

 

 

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.

HTML CSS Div Layer tutorials