CSS中position属性三大定位方式讲解

Relative

Relative的元素相对于它本来的位置来作定位，但在文档流中依然保持着原有的默认位置，即便它做了偏移，周围的元素也不会占领的它的位置。

若是一个元素是相对定位（甚至它还作了偏移），它周围的元素在排版时参考的依然是那个元素本来的位置（指在没有偏移时的位置）。

若是同时声明top和bottom的值，那么top值的优先级更高。若是同时声明left和right的值，那么优先级取决于网页的语言（例如，英语法语德语西班牙语）。好比，在英语的网页中，left的优先级更高；在阿拉伯语的网页中，right的优先级更高。

 

Absolute

绝对定位的元素将脱离文档流。即在排版中，绝对定位的元素再也不占有它原来的位置，后面的元素将占领它本来的位置。

绝对定位的元素根据它的相对定位（Relative）的父节点的位置定位。若是它没有相对定位的父节点，则直接参考body容器定位。

对绝对定位的元素使用偏移量属性，这个元素将以相对定位的父节点做为参考系进行偏移。若是没有对绝对定位的元素使用偏移量属性，那么该元素将被放置在父节点的左上角。

若是只设置了top属性，那么该元素则只作垂直方向的偏移，而水平方向依然靠着父节点的最左边。

一、若是绝对定位的元素有固定的height和width值：

若是同时声明top和bottom的值，那么top值的优先级更高。若是同时声明left和right的值，那么优先级取决于网页的语言（例如，英语法语德语西班牙语）。好比，在英语的网页中，left的优先级更高；在阿拉伯语的网页中，right的优先级更高。

二、若是绝对定位的元素没有固定的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 却能够。由于它本来所占的空间仍然占据文档流。

------------------

【参考资料】

1. 关于CSS中的float和position
2. CSS中的Position属性
3. 对CSS中的Position、Float属性的一些深刻探讨