HTML CSS Div Layer Tutorials | Affordable Web Hosting Home

Overlapping Float Div Layers

Unlike HTML table, div layers can be overlapped with each other. The order of how float div layers are overlapped are completely under control easily with z-index positioning. The following is a typical example of a overlapping 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 3

Default Layout of Floating Div Layers

The default position of a div layer is static. It means that the div layer will appear where you create it. Moreover the div layers will not be overlapped with each other by default.

Layout of a Typical Overlap Floating Div Layers

In order to overlap the HTML div layers with each other, you have to do the following setting:

Outer Wrapper Div Layer Setting:

You need to create a container div layer (e.g. outerWrap) so that other div layers can be floating over it. I called this container Outer Wrapper Div Layer or Master Div Layer.

  • Set the position of the outer wrapper div layer or master div layer to Relative position.
  • Set the CSS z-index of the outer warpper div layer to zero so that other div layers can be positioned on the top of it.

Overlapping and Float Over Layers inside Outer Wrapper Div Layer Setting:

In order that other div layers within the Outer Wrapper Div Layer can be floated over and overlapped with each other, the following setting is required:

  • Set the position of these layers (e.g. layer1 and layer2) to Absolute position.
  • Set the CSS z-index of these layers higher than the Outer Wrapper Div Layer.
  • The z-index of these layers determine which layer float above the other layer. The layer with higher z-index number overlaps an layer with a lower z-index number.

CSS Div Layers Codes

#outerWrap {
position: relative;
z-index: 0;

background-color: #00CCFF;
height: 400px;
width: 650px;
}

 

#layer1 {
position: absolute;
z-index: 1;

background-color: #6F0;
height: 250px;
width: 350px;
top: 40px;
left: 40px;
}

 

#layer2 {
position: absolute;
z-index: 2;

background-color: #FC0;
height: 250px;
width: 350px;
top: 120px;
left: 260px;
}

HTML CSS Tutorial contents: How to overlapping and floating div layers. In the next tutorial, we will show how to change the stacking or floating order of div layers by changing the css z-index.

HTML CSS Div Layer tutorials