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)系,頁面中內(nèi)div浮起[非float],相對于頁面定位,與外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)系,頁面中內(nèi)div浮起[非float],相對于頁面定位,與外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浮起來并相對于外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浮起來并相對于外div定位
/div>
div class="e">
div class="ee" style="left: -10px;">/div>
E:這個是說明邊界問題。-10 != 反向10px間距
/div>
標(biāo)簽:云南 晉中 北海 陽泉 衢州 鹽城 寧夏 來賓
巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《CSS關(guān)于相對定位和絕對定位的說明實例》,本文關(guān)鍵詞 CSS,關(guān)于,相對,定位,和,絕對,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。