<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> </div>
A: No postion is set. Generally, the nested relationship is not set.
</Div> <Div>
<Div class = "bb"> </div>
B: Set relative only for external div, which is usually nested.
</Div> <Div>
<Div> </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 style = 'background: # ff0000 & prime;>
<Div> </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 style = 'background: # ff0000 & prime;>
<Div 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>
<Div style = 'left:-10px; '> </div>
E: This indicates the boundary issue. -10! = Reverse 10px spacing
</Div> |
