Relative
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来解决。
【本文参考】