本文回顾了CSS中的position属性，详细解释了relative和absolute定位方式的区别及使用方法，通过实例展示了如何应用这些定位属性来实现网页布局。
好久好久不写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则页面最顶端为黄色；
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
