CSS中position属性三大定位方式讲解
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来解决。
【本文参考】
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
