CSS about relative positioning and absolute positioning of the description of the example _css/html

<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: Do not set postion, general nesting relationship
</div>

<div class= "B" >
<div class= "BB" ></div>
B: Only outside Div set relative, general nesting relationship
</div>

<div class= "C" >
<div class= "CC" ></div>
C: Only inside Div set Absolute, the document is nested relationship, the page inside Div float [not float], relative to the page positioning, and outside Div Independent.
</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: Do not set postion, general nesting relationship
</div>

<div class= "B" >
<div class= "BB" ></div>
B: Only outside Div set relative, general nesting relationship
</div>

<div class= "C" >
<div class= "CC" ></div>
C: Only inside Div set Absolute, the document is nested relationship, the page inside Div float [not float], relative to the page positioning, and outside Div Independent.
</div>

<div class= "D" style= "background: #ff0000" >
<div class= "DD" ></div>
D: Outside Div set relative, inside div set Absolute, inside div float and relative to outside Div position
</div>

<div class= "D" style= "background: #ff0000" >
<div class= "dd" style= "position:relative" ></div>
D: Outside Div set relative, inside div set relative, inside div float and relative to outside Div position
</div>

<div class= "E" >
<div class= "ee" style= "left: -10px;" ></div>
E: This is a description of the boundary issue. -10!= Reverse 10px spacing
</div>