CSS examples of relative positioning and absolute positioning_CSS/HTML

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

A: No postion is set, the general nesting relationship is

B: Only the outer div is set relative, general nesting relationship
< ;/div>

C: Only the inner div is set to absolute, the document is a nested relationship, the page The inner div is floated [non-float], positioned relative to the page, and has nothing to do with the outer div.

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

A: No postion is set, the general nesting relationship is

B: Only the outer div is set relative, general nesting relationship
< ;/div>

C: Only the inner div is set to absolute, the document is a nested relationship, the page The inner div is floated [non-float], positioned relative to the page, and has nothing to do with the outer div.

D: The outer div is set to relative, and the inner div is set to relative The div is set to absolute, and the inner div floats and is positioned relative to the outer div

D: The outer div is set to relative, the inner div is set to relative, and the inner div is floated and positioned relative to the outer div

E: This is to illustrate the boundary problem . -10 != reverse 10px spacing