浅谈CSS+DIV盒子的相对和绝对定位

CSS定位属性position有四个选项值：static、absolute、relative、fixed。在这里，只说一下最常用到得两个定位属性值，absolute和relative定位。

绝对定位（absolute）：将被赋予此定位方法的对象从文档标准流中拖出，使用left，right，top， bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，没有脱离标准流的盒子，则以 body 对象左上角作为参考进行定位，进行绝对定位后的盒子原来在标准流中的位置将被删除。绝对定位对象可层叠，层叠顺序可通过 z-index 属性控制，z-index值为无单位的整数，数值越大的在最上面，可以有负值（目前负值FF不支持）。

相对定位（relative）：与绝对定位不同，相对定位的对象没有脱离文档标准流，它同样是依据left，right，top，bottom等属性在正常文档流中偏移自身位置，同样可以用z-index进行分层设计。

无论是绝对定位还是相对定位都不会对元素自身的空间造成影响。

有一种对这两种定位的理解是：贡献的绝对定位和自私的相对定位。个人觉得这种理解是非常贴切的，在绝对定位中，脱离标准流的盒子离开标准流时会自动贡献出自己原来在标准流中所占的空间，给标准流中别的盒子使用。而在相对定位中，盒子只是相对于自己原来的位置有所偏离，并未离开标准流，但是可能遮住了邻近的盒子，在占有原有空间的基础上，又侵占了别的盒子的空间，为整个布局带来混乱，

最后来用一个比喻总结两种定位的特征，绝对定位就像一栋楼的不同楼层，不同楼层怎么移动都没有影响，但都与地基相关，相对定位就像一栋楼的同一层楼内，同一空间内，怎么移动都会有影响。