當前位置：軟件學堂 > 資訊首頁 > 網絡編程 > DIV+CSS > css absolute絕對定位屬性

css absolute絕對定位屬性

2012/11/27 10:26:14作者：佚名來源：網絡

移動端

【實例介紹】

css absolute絕對定位屬性

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

【基本語法】

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

【語法介紹】

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

【實例代碼】


<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都沒有設置絕對定位，可以看到一個父diV里面有3個div，都是標準流方式排列，效果如圖所示。

絕對定位(absolute)運行效果

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

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

絕對定位(absolute)運行效果

下面將block2的設置修改如下。
#block2{
position：absolute;
top：100；
right：100；
}

這時的效果如圖所示，以瀏覽器為基準，從左上角開始向下和向左各移動100緣素．

絕對定位(absolute)運行效果

【素材及源碼下載】

請點擊：絕對定位屬性(css absolute) 下載本實例相關素材及源碼

標簽：定位

上一篇：css左邊偏移屬性left、右邊偏移屬性right
下一篇：css fixed固定定位屬性

相關文章

熱門軟件/ 推薦游戲/ 手機軟件

資訊分類

Dreamweaver Flash DIV+CSS 編程其他

推薦教程

精品軟件推薦

360安全衛士

訊飛輸入法

欧美一级一极性活片免费观看,欧美一级艳片欧美精品,欧美一级性爱大片,欧美一级囗交视频视频,欧美一级特黄录像视频