最近在恶补css的东西，也是和大家分享下position:absolute的巨大用处，先说下大家都很熟的，设置这个属性后，其display计算值就变成block，然后会破坏正常的流特性。现在说一下两个实用性很强的知识点。
1.具有相对i特性的无依赖absolute绝对定位
一个绝对定位元素，没有设置任何的left/right/top/bottom,而且其祖先元素全部都是非定位元素，其位置会在哪里呢，大家会觉得设置position:absolute,必须跟着给父元素一个相对定位，设置相关的left/top，还有z-index等。这是非常严重的认知和使用错误了，请记住：absolute是非常独立的css属性，其样式和行为表现不依赖其他任何css属性就可以完成了。
比如实现一个左上角logo的标记，很多人包括我以前也会这样写：
.father{
position:relative;
}
.logo{
position:absolute:
top:0;left:0;
}实际上一句css就可以，而且兼容性好，直接是：
.logo{
position:absolute
}无依赖绝对定位，本质上就是“相对定位”，仅仅是不占据css流的尺寸空间而已。这个可是大有用处，比如那些各类图标的定位，配合margin,简直是完美，包括ie6在内的浏览器都是兼容良好的。贴下代码，
.icon{
position:absolute;
margin-left:-20px;
width:20px;height:20px;
background:url(warn.png) no-repeat center;
}相比给父元素设置相对定位的代码更加简洁，容错性更强，维护成本更低。还有一些下拉框，表单后面的提示语等等，大家可以去试试。
2.absolute实现垂直水平居中
这是利用到absolute的流体特性，但是在特殊条件才会有，“对立方向同时发生定位的时候",
<div class="box"></div>
.box{
position:absolute:
right:0;left:0;
}你们可以试下设置对立定位属性的绝对定位元素，你会发现它神似普通的<div>元素，无论设置padding还是margin,其占据的空间一直不变，变化的是content box的尺寸，这就是典型的流体表现特性。所以就有了很帅气的垂直水平居中：
如果不用管ie7浏览器的话，这种绝对定位元素水平居中的方法可以淘汰：
.element{
width:300px;height:300px;
position:absolute;left:50%;top:50%;
margin-left:-150px;
margin-top:-150px;
}很多情况下用transform配合绝对定位，但是会让ios微信闪退，还是要尽量避免好。
.element{width:300px;height:300px;
position:absolute;left:50%;top:50%;
transform:translate(-50%,-50%)
}首推的方法是利用绝对定位元素的流体特性配合margin:auto,很负责任的告诉大家这种方法吴姐：
.element{
width:300px;height:300px;
position:absolute;
left:0;top:0;rigth:0;bottom:0;
margin:auto;
}