html自适应屏幕居中,css的position属性 居中 宽度自适应屏幕

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属性的盒子变强大了：

可以通过top和left来设置偏移量，相对它原来的位置，而不会对别的元素造成任何影响，无论显示在哪，它的根依然在原地；

可以设置z-index属性，控制与其他的relative层亦或是游荡的absolute的层叠关系；

可以收留absolute孩子了；

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

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

备注 *{position：relative；}  用 body{position:relative;} 代替更好

居中 position:relative; margin-left:auto; margin-right:auto;