css absolute絕對定位屬性

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

移動端

【實例介紹】

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)運行效果