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万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章