Examples of CSS relative and absolute positioning

<Style>
Body
{Margin: 30px; font-size: 9pt ;}

. A,. B,. C,. D,. e
{
Width: 100px;
Height: 100px;
Margin: 5 auto;
Color: # FFF;
Background: #000;
}
. AA,. BB,. CC,. DD,. ee
{
Top: 10px;
Left: 10px;
Width: 10px;
Height: 10px;
Overflow: hidden;
Background: # f90;
}
. B,. D,. e
{Position: relative ;}
. CC,. DD,. ee
{Position: absolute ;}
</Style>

<Div class = "A">
<Div class = "AA"> </div>
A: No postion is set. Generally, the nested relationship is not set.
</Div>

<Div class = "B">
<Div class = "BB"> </div>
B: set relative only for external Div, which is usually nested.
</Div>

<Div class = "C">
<Div class = "cc"> </div>
C: set absolute only for the inner Div. The document contains the nested relationship. The inner DIV in the page float [non-float], which is independent of the outer Div relative to the page positioning.
</Div>

<Style>
Body
{Margin: 30px; font-size: 9pt ;}

. A,. B,. C,. D,. e
{
Width: 100px;
Height: 100px;
Margin: 5 auto;
Color: # FFF;
Background: #000;
}
. AA,. BB,. CC,. DD,. ee
{
Top: 10px;
Left: 10px;
Width: 10px;
Height: 10px;
Overflow: hidden;
Background: # f90;
}
. B,. D,. e
{Position: relative ;}
. CC,. DD,. ee
{Position: absolute ;}
</Style>

<Div class = "A">
<Div class = "AA"> </div>
A: No postion is set. Generally, the nested relationship is not set.
</Div>

<Div class = "B">
<Div class = "BB"> </div>
B: set relative only for external Div, which is usually nested.
</Div>

<Div class = "C">
<Div class = "cc"> </div>
C: set absolute only for the inner Div. The document contains the nested relationship. The inner DIV in the page float [non-float], which is independent of the outer Div relative to the page positioning.
</Div>

<Div class = "D" style = "Background: # ff0000">
<Div class = "DD"> </div>
D: set relative for the external Div, and absolute for the inner Div. The inner Div floats and locates relative to the outer Div.
</Div>

<Div class = "D" style = "Background: # ff0000">
<Div class = "DD" style = "position: relative"> </div>
D: set relative for the external Div, set relative for the inner Div, and float the inner Div and locate it relative to the outer Div.
</Div>

<Div class = "E">
<Div class = "ee" style = "Left:-10px;"> </div>
E: This indicates the boundary issue. -10! = Reverse 10px spacing
</Div>