css佈局與定位 之 position

好久好久不寫css了,將近一年了吧,最近一直用silverlight了,以前的東西都有些忘記了,現在再溫習一下:

1.position屬性:position屬性規定了元素的定位類型,常用的有relative和absolute

大家都知道,relative是相對定位,absolute是絕對定位;那麼定位的標準又是什麼呢

absolute:生成絕對定位的元素,相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

relative:生成相對定位的元素,相對於其正常位置進行定位因此,"left:20" 會向元素的 LEFT 位置添加 20 像素。

例子:

<html>

<head></head>

<style type="text/css">
 *{margin:0px;padding:0px;}
 #box{position:absolute;bottom:0px;  width:100%;text-align:center;  background-color: yellow}
 #box img{width:70px;cursor:pointer;}
</style>

<body style=" background-color:Gray">
   <div id="box">
        <img src="Image/4.png" />
        <img src="Image/5.png" />
        <img src="Image/6.png" />
        <img src="Image/1.png" />
        <img src="Image/2.png" />
        <img src="Image/3.png" />
   </div>

</body>
</html>

橘紅色的值爲absolute時,頁面最底端爲黃色;如爲relative則頁面最頂端爲黃色;

 

 

發佈了88 篇原創文章 · 獲贊 16 · 訪問量 30萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章