Relative
Relative的元素相对于它原本的位置来做定位,但在文档流中依然保持着原有的默认位置,即使它作了偏移,周围的元素也不会占领的它的位置。
如果一个元素是相对定位(甚至它还做了偏移),它周围的元素在排版时参考的依然是那个元素原本的位置(指在没有偏移时的位置)。
如果同时声明top和bottom的值,那么top值的优先级更高。如果同时声明left和right的值,那么优先级取决于网页的语言(例如,英语法语德语西班牙语)。比如,在英语的网页中,left的优先级更高;在阿拉伯语的网页中,right的优先级更高。
Absolute
绝对定位的元素将脱离文档流。即在排版中,绝对定位的元素不再占有它原来的位置,后面的元素将占领它原本的位置。
绝对定位的元素根据它的相对定位(Relative)的父节点的位置定位。如果它没有相对定位的父节点,则直接参考body容器定位。
对绝对定位的元素使用偏移量属性,这个元素将以相对定位的父节点作为参考系进行偏移。如果没有对绝对定位的元素使用偏移量属性,那么该元素将被放置在父节点的左上角。
如果只设置了top属性,那么该元素则只做垂直方向的偏移,而水平方向依然靠着父节点的最左边。
1、如果绝对定位的元素有固定的height和width值:
如果同时声明top和bottom的值,那么top值的优先级更高。如果同时声明left和right的值,那么优先级取决于网页的语言(例如,英语法语德语西班牙语)。比如,在英语的网页中,left的优先级更高;在阿拉伯语的网页中,right的优先级更高。
2、如果绝对定位的元素没有固定的height或者width值:
(1)如果元素并没有固定height值,可是却同时有top和bottom的值,那么该元素将横跨除了top和bottom之外剩下的所有高度。
(2)如果元素并没有固定width值,可是同时有left和right的值,那么该元素将横跨除了left和right之外剩下的所有宽度。
(3)如果元素既没有固定height和width值,却同时有top, bottom, left, right值,那么该元素将占据除了四条边距离之外的所有空间。
Fixed
固定定位的元素跟绝对定位的元素很相似,只不过它参照的坐标系是浏览器的视口(viewport)。固定定位的元素不随着页面滚动而移动,它会始终保持在那个位置。另外,在IE6中使用固定定位有一个BUG,需要使用一些hack来解决。
行内元素设置positon属性后的变化
relative : 不会改变元素的Display属性,原来是什么类型的依旧是什么类型。
absolute | fixed :行内元素将被重置为块级元素。例如:
<span style="position:absolute; width:100px; height:50px;">span</span>
这是完全正确的。
<span style="position:absolute; display:block; width:100px; height:100px;">span</span>
这里的display:block是多余的。
position 与 float
一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点,因为这是两个不同的流,一个是浮动流,另一个是“定位流(这是自己起的名字,呵呵)”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
------------------
【参考资料】