A Divs Layers Group Inside Another Divs Layers group

In previous css div layers tutorial, the layout of the div layers are very simple. In this tutorial, we do a more complicated layout of the HTML css divs. I called this layout "div layers group inside another div layers group". The example is shown as below:

div layer id "outerWrap" with z-index 0

div layer id "layer1" with z-index 1

id "layer21" - div inside "layer2"
position: relative, z-index: 0

id "layer22"
position: absolute, z-index: 2

id "layer23"
position: absolute
z-index: 3

id "layer2" - position: absolute, z-index: 2

How the Divs Layers Layout Works?

There are two groups of divs layers layout.

Div Layer Layout "Group 1":

The div layers "outerWrap", "layer 1" and "layer 2" form a group. This is shown as the outer thick black border in the above example.

Div Layer Layout "Group 2":

The div layers "layer 21", "layer 22" and "layer 23" from another group. This div layers group is formed inside div layers "group1". Div layers "Group 2" is shown as the inner thick black border in the above example.

Div Layer Layout "Group 1"

We show this div layer example in previous tutorial. Since "layer 1" and "layer 2" need to float inside the "outerWrap" div layer, the position setting should be:

Div layer "outerWrap" - relative position
Div layer "layer 1" - absolute position
Div layer "layer 2" - absolute position

Moreover "layer 2" need to float above "layer 1", the z-index setting should be:

z-index of Div layer "outerWrap" - 0
z-index of Div layer "layer 1" - 1
z-index of Div layer "layer 2" - 2

Div Layer Layout "Group 2"

Since "layer 22" and "layer 23" need to float inside the "layer 21" div layer, the position setting should be:

Div layer "layer 21" - relative position
Div layer "layer 22" - absolute position
Div layer "layer 23" - absolute position

In this case, div layer "layer 21" act as the Outer Wrapper of div layer Group 2". This is always better to create a new Outer Wrapper div layer whenever you wish to create a new div layer group.

Moreover "layer 23" need to float above "layer22", the z-index setting should be:

z-index of Div layer "layer 21" - 0
z-index of Div layer "layer 22" - 2
z-index of Div layer "layer 23" - 3

CSS Div Layers Codes

/* This is Div Layers Layout "Group 1" */

#outerWrap {
position: relative;
z-index: 0;
background-color: #00CCFF;
height: 400px;
width: 650px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}

#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;
}

/* This is Div Layers Layout "Group 2" */

#layer21 {
position: relative;
z-index: 0;
height: 220px;
width: 320px;
background-color: #CCC;
top: 0px;
left: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}

#layer22 {
position: absolute;
z-index: 2;
height: 140px;
width: 240px;
background-color: #FCF;
top: 40px;
left: 30px;
}

#layer23 {
position: absolute;
z-index: 3;
height: 90px;
width: 180px;
left: 120px;
top: 110px;
background-color: #C9F;
}

HTML CSS Tutorial contents: How to form a new div layer group inside another div layer group.