當(dāng)前位置:軟件學(xué)堂 > 資訊首頁 > 網(wǎng)絡(luò)編程 > DIV+CSS > css absolute絕對定位屬性

css absolute絕對定位屬性

2012/11/27 10:26:14作者:佚名來源:網(wǎng)絡(luò)

移動端

【實(shí)例介紹】

css absolute絕對定位屬性

當(dāng)容器的position屙l生值為absolute時,這個容器即被絕對定位了。絕對定位在幾種定位了法中使用最廣泛,這種方法能夠很精確地將元素移動到你想要的位置。使用絕對定位的容器.其前面或者后面的容器會認(rèn)為這個層并不存在,即這個容器浮于其他容器上,它是獨(dú)立出來的.所以用position:absolute將一個元素放到固定的位置非常方便。
如果對容器設(shè)置了絕對定位,默認(rèn)情況下,容器將緊挨著其父容器對象的左邊和頂邊.即父容器對象左上角。

【基本語法】

position:absolute
left:auto  |   長度值    |   百分比
right:auto  |   長度值  |  百分比
top:auto  |   長度值  |  百分比
bottom:auto  |   長度值  |  百分比

【語法介紹】

通過left、right、top、bottom等屬性與margin、padding、border進(jìn)行絕對定位,絕對定位的元素可以有邊界,但這些邊界不壓縮。定位的方法是在CSS中設(shè)置容器的top(頂部)、bottom(底部)、left(左邊)和right(右邊)的值,這4個值的參照對象是瀏覽器的4條邊。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>absolute屬性</title> <style type="text/css"> body{  margin:15px;  font-family:Arial;  font-size:12px; } #father{  background-color:#FF9933;  border:2px dashed #000000;  padding:25px; } #father div{  background-color:#66CC66;  border:2px dashed #000000;  padding:10px;  } #block2{ } </style> </head> <body>  <div id="father">   <div >box1</div>   <div id="block2">box2</div>   <div >box3</div>  </div> </body> </html>

【代碼分析】

這里3個diV都沒有設(shè)置絕對定位,可以看到一個父diV里面有3個div,都是標(biāo)準(zhǔn)流方式排列,效果如圖所示。

絕對定位(absolute)運(yùn)行效果

下面使用絕對定位方式,在代碼中找到對#block2的CSS設(shè)置位置,目前它是空的,下面把它改為如下代碼。
#block2{
position:absolute;
top:0;
right:0;
}

這里將box2的定位方式改為絕對定位absolute,此時效果如圖所示。這時是以瀏覽器窗口作為定位基準(zhǔn)的。此外,該div會徹底脫離標(biāo)準(zhǔn)流,box3會緊挨著boxl,就好像沒有box2一樣。

絕對定位(absolute)運(yùn)行效果

下面將block2的設(shè)置修改如下。
#block2{
position:absolute;
top:100;
right:100;
}

這時的效果如圖所示,以瀏覽器為基準(zhǔn),從左上角開始向下和向左各移動100緣素.

絕對定位(absolute)運(yùn)行效果

 【素材及源碼下載】

請點(diǎn)擊:絕對定位屬性(css absolute) 下載本實(shí)例相關(guān)素材及源碼

 

標(biāo)簽: css absolute  定位屬性