position：relative和absolute研究

关于relative和absolute的区别，一直在用，相安无事。事实上，浏览器无论对用户还是开发者越来越人性化，如果不考虑浏览器向后兼容性的话，css将变得很美好。因为即使IE开发者面对它的旧版本，至于为什么成了这样，谁又知道呢？

1.absolute；绝对定位；对象从文档流中抽取出来；也就是说该对象在dom中已经不占位置了。

那么如何定位呢？分为两种情况：（1）.父节点的position为relative，

这种情况下，设置top和left值，则相对的坐标原点为父节点当前位置，

（2）.父节点的position为其他属性，那么设置top和left值，则相对于body。

两者都采用z-index设置层叠，采用top和left定位。

以上（1）（2）情况兼容IE678，FF，chrome，其他未测。

这两种做法中，若不设置top和left的默认值，在IE67下根据其他元素定位不同会发生其他未预料情况，而在IE8及其它浏览器下top和left的默认值均为0；在IE67下设置了position：absolute，而未设置其top和left值，会造成不期待的定位错误，但一旦设置了，又和其它浏览器无异，我反复测试，尚无灵感。

以上是具有较好兼容性的写法。而且设置父节点为relative亦能解决IE6下浮动双边距的问题，何乐而不为呢？

（3）无论是否设置父节点为relative，任何设置为absolut的对象都能设置margin属性，在定位上和top与left可以达到相同效果，虽然也可以用，但定义中写此时对象已经不再具有边距了。至于为什么可以用，谁又知道呢？他们的“盒子”出身永远没变~

2.relative；相对定位，可用z-index来设置层叠，让对象保留文档流里的位置，又能控制层叠。难道relative的一个重要作用应该在这？又或者是去限制一个无家可归的absolute层？

[使用相对定位后，对象不可层叠]这句话我一直没太理解。默认的static，在此基础上加上relative对布局位置不会造成任何影响。仍然是原来那一堆盒子。但这个有relative属性的盒子变强大了：

1. 可以通过top和left来设置偏移量，相对它原来的位置，而不会对别的元素造成任何影响，无论显示在哪，它的根依然在原地；
2. 可以设置z-index属性，控制与其他的relative层亦或是游荡的absolute的层叠关系；
3. 可以收留absolute孩子了；

哇，强大的relative。我们为什么要用relative，因为它在那儿，它还在那儿~

你猜我做了什么，找到一个网页，在它的css文件前面加了句*{position：relative；}（如果你想在后面加，也可以试试~），预览，哇，居然一点也没变！现在可以构建一个三维的甚至让它们飘来飘去的网页了，重要的是，它们都还能回到原点，而不是全部推挤在网页的左上角~