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:均不設(shè)置postion,一般嵌套關(guān)系
/div>
div class="b">
div class="bb">/div>
B:僅外div設(shè)置relative,一般嵌套關(guān)系
/div>
div class="c">
div class="cc">/div>
C:僅內(nèi)div設(shè)置absolute,文檔中為嵌套關(guān)系,頁(yè)面中內(nèi)div浮起[非float],相對(duì)于頁(yè)面定位,與外div無關(guān)。
/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:均不設(shè)置postion,一般嵌套關(guān)系
/div>
div class="b">
div class="bb">/div>
B:僅外div設(shè)置relative,一般嵌套關(guān)系
/div>
div class="c">
div class="cc">/div>
C:僅內(nèi)div設(shè)置absolute,文檔中為嵌套關(guān)系,頁(yè)面中內(nèi)div浮起[非float],相對(duì)于頁(yè)面定位,與外div無關(guān)。
/div>
div class="d" style="background:#ff0000">
div class="dd" >/div>
D:外div設(shè)置relative,內(nèi)div設(shè)置absolute,內(nèi)div浮起來并相對(duì)于外div定位
/div>
div class="d" style="background:#ff0000">
div class="dd" style="position:relative">/div>
D:外div設(shè)置relative,內(nèi)div設(shè)置relative,內(nèi)div浮起來并相對(duì)于外div定位
/div>
div class="e">
div class="ee" style="left: -10px;">/div>
E:這個(gè)是說明邊界問題。-10 != 反向10px間距
/div>