布局学习之定位.docxVIP

布局学习之定位对于定位而言，有广义和狭义之分。狭义定位：指的用position属性进行定位；广义定位：指的用标准流、浮动等各种方法完成网页元素的定位。position属性有四个值：static如果一个元素没有position属性，默认就是static静态定位的意思；relative相对定位absolute绝对定位fixed固定定位（IE6不兼容，IE7及以上版本开始兼容）首先我们来学习相对定位： 相对定位特性：1 相对定位不脱标任何一个元素，都可以进行相对定位。只需要给元素设置：position:relative;那么元素就是相对定位的元素了。新建一文件 div id=box1/div div id=box2/div div id=box3/divdiv{width:50px;height: 50px;}#box1{background-color:red ;}#box2{background-color:blue ;}#box3{background-color:green ;}原始状态给蓝色盒子加上position:relative 后 结论：页面没有任何改变，那么说明相对定位不脱标！接下来再给蓝色盒子添加：top:30px left:60px; 观察结果如下图2 相对定位可以根据偏移属性来确定位置，当标签设置了相对定位后，会使其从正常位置移走，但原来所占的位置并不会消失。