绝对定位position用于定位盒子对象，有时一个布局中几个小对象，不易用css padding、css margin进行相对定位，这个时候我们就可以使用绝对定位来轻松搞定。特别是一个盒子里几个小盒子不规律的布局，这个时候我们使用position绝对定位非常方便布局对象。
absolute特性
- 包裹性，同float
- 破坏性，同float
不依赖relative的绝对定位
absolute绝对定位元素会脱离文档流，但其位置仍是原来的位置并未移动（去浮动、位置跟随、超越overflow:hidden/scroll）；绝对定位生效时，float一定会失效；绝对定位元素不占据任何空间，可认为宽高为0
IE7下绝对定位元素都会变成inline-block水平，解决该问题，可在绝对定位元素外部用block水平容器包裹（div标签等）。
图标覆盖效果、定位下拉框
无依赖绝对定位元素可以用margin来精确控制其显示的位置，正负值皆可，且可以兼容IE6。该方法比依赖relative要更简洁且适应性更好，充分利用绝对定位的跟随性
对齐居中
父元素设置text-align:center,要居中inline水平元素设置绝对定位，绝对定位元素之前用空格符号占位这样才能居中。
小tips
表单描述必填项星号对齐：让星号绝对定位化，这样文字就能很好的左对齐，不受星号影响
表单提示信息开头小图标对齐：让小图标绝对定位化，同星号
表单提示文字溢出：使用绝对定位后，依然没有换行，虽然已经超出了外部容器的尺寸，这是因为绝对定位元素不占据任何空间。
脱离文档流
动画尽量作用在绝对定位元素上，因为绝对定位元素已经脱离了文档流，只需要对它操作即可，不会影响页面的其他布局。
脱离之后就会出现层级问题：
- 后来居上
- z-index控制层级
z-index不是必须的
- 如果只有一个绝对定位元素，自然不需要z-index；
- 如果有两个绝对定位元素，控制DOM流的前后顺序也可以达到覆盖效果，也可以不使用z-index；
- 如果多个绝对定位元素交错，z-index:1即可控制；
- 如果非弹框类的绝对定位元素z-index>2，则必定是冗余z-index，可以优化；
定位
top,left,right,bottom；绝对定位元素相对于其设置了position非static的父元素来定位。
-
定位一般组合使用：1.top,left; 2. top,right; 3. left,bottom; 4. right,bottom;
-
也可单个使用，单方向定位
-
如果四个同时使用,,且元素本身没有设置宽高，则绝对定位元素会被拉伸开： 如left:0,right:0,top:0,bottom:0，则元素会与基础定位父元素的大小相同。
-
如果四个同时使用，且元素自身也设置了宽高，则优先选用元素自身的宽高；但有一点需要注意，同时再加上margin:auto时，即可实现绝对居中效果（IE8+）