在CSS2.1中,一个框(box,就是元素形成的方块等)可以根据三种定位体系布局
默认的定位方式,元素按常规流布局,top ,right ,bottom ,left 属性值不生效。
相对定位属于常规流,元素根据它原来的位置来定位。
如图,B 使用相对定位后,对框C没有影响,并且框B移动超出了它的包含块。
有如下代码:
<html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .wrapper{ width: 300px;height: 200px; background-color: gray; } div{ width: 250px;height:50px; } .A{ background-color: red; } .B{ background-color: green; } .C{ background-color: blue; } </style> </head> <body> <div class="wrapper"> <div class="A">A</div> <div class="B">B</div> <div class="C">C</div> </div> </body> </html>
上面效果页面显示为:
现在对 元素B 使用绝对定位:
可以看到,元素B 脱离了常规流,从浏览器的底部向上10px,因为元素B的祖先元素 wrapper并没有使用定位,所以元素B的参照物是最初包含块(BODY)。
现在元素wrapper也使用定位(positon属性非默认值)
如果元素B的祖先元素wrapper也使用了定位(positon属性非默认值),那么元素B将以它的祖先元素 wrapper为参照物,从wrapper的底部向上移动了10px。
固定定位和绝对定位一样也脱离常规流,不过其参照物是当前的可视窗口(就是我们通过显示屏看到的一个窗口)。
元素设置了固定定位,如果当前页面一页显示不完,我们拖动滚动条时,定位元素就一直在当前可视窗口的某个位置上固定不变。
CSS 可视化设计模型(1)定位方案(Positioning schemes)
原文:http://www.cnblogs.com/womlly/p/5184394.html