深入学习absolute

absolute与float:left类似：
1. 包裹性
两者可以让元素inline-block化（意思是展现方式与inline-block类似，但实质上display属性会变为block）
比如一个div默认宽度占据100%，但加上position:absolute或float属性后，宽度就会自适应内部元素的宽度
比如一个span原本是inline元素，无法设置width属性，但是加上上述属性后，width属性就生效了，不再需要设置display属性
2. 破坏性
float相对于absolute，破坏性要低一些
浮动的破坏性在于切断了line box链，致使高度塌陷，宽度却没有缺失，其本身占据的实体位置还是存在的
absolute的宽高都是塌陷的，其实体位置不像浮动那样存在。（宽度缺失使指该元素本该占有的宽度不再存在）

不要处处使用absolute

absolute属性常常可以被margin属性代替，这样的话结构更简洁清晰，易于维护。但是margin的变化造成的性能影响往往大于absolute。

正确使用absolute

独立的absolute（没有被relative包裹以及没有使用left,top等属性）可以摆脱overflow的限制，无论是hidden（即使溢出也不会被隐藏）或是scroll（无论滚动到哪里都一直显示）

属性

具有absolute属性的元素
1. 脱离文档流(你懂的，就是不占据实质空间了)
2. 去浮动（即原本有float属性的话，若再设置absolute，float被覆盖）
3. 位置跟随 (原本一行显示文字，下面一行显示的是block的div，我们将div进行absolute
化后，div位置并不会发生变化。)（原本几个inline-block元素放在一起，将中间的div进行absolute化，这个div的位置依然不变，后面的元素会往前挤）

配合

配合margin可以精确定位



跟随性实例
根据上述属性，我们就可以做出一些效果。比方说在一个图片的左上角，右上角摆点东西，比如什么‘热销’啊，‘vip’啊什么的，如下

<div style="width: 500px;height: 500px;margin-left: 200px; background-color: #ccc;margin-top: 100px;"><i style="position: absolute;width: 60px;height: 20px;background-color: #0f0;">xxxx</i><img src="" alt="" width="500px" height="500px"><!----><i style="font-size: 8px;position: absolute;width: 30px;height: 20px;background-color: #f00;margin: 0 0 0 -30px;">vip</i></div>

可以看出来，三个inline-block的东西本应该在同一行的。首先第一个i标签被absolute后，就不占实体空间，所以后面的img标签因其宽高和外部div的宽高一致就占据了所有空间，第一个i也会顺其自然的漂浮在img的左上角。
第二个i标签，因其也是absolute，所以其不占任何实体空间。如果没有img和i标签之间的注释，那么第二个i标签会换行显示，这是因为inline-block元素之间本就会产生空格的缘故，现在用注释去掉了这个空格后，又因为absolute元素不占空间，所以理所当然的紧跟在了img后，且没换行，这样利用margin-left负值就可以让这个元素显示在右上角了



实例
想要实现百度搜索里的搜索提示效果，只要让提示框元素作为父容器的第一个元素，且absolute，之后margin-top搜索框的高度，就可以 了




怎么用absolute让一个元素居中呢？
父容器的text-align:center是无法控制到脱离文档流的元素的，但因为absolute的跟随性，我们可以在该absolute元素前放置一个 ，这样设置父容器的text-align:center就让&nbsp走到中间去了，同时，absolute元素也跟着去了中间，同时设置absolute的margin属性进行精确定位，就可以让absolute元素去中间了（因浏览器不同很多时候div中默认会存在这种东西的，见http://www.zhangxinxu.com/wordpress/2011/12/position-absolute-text-align-center/）
http://www.imooc.com/video/4464




动画尽量作用在绝对定位元素上。因为绝对定位元素不会影响其他元素，可以提升性能




absolute元素left，right，top，bottom都为0可以实现不指定宽度高度就能满屏效果




如果外部容器为absolute元素，left，right，top，bottom都为0，那么内部元素是支持百分比高度宽度的。




如果同时指定left,right为0，那么宽度是100%，但同时指定width的话，最终效果还是根据width来。此时left: 0;right: 0;top: 0;width: 50%;的情况下，如果使用margin:auto; 那么这个元素就会水平居中。（根据我的实验，如果top,bottom都为0，高度被height限制，使用margin同样能做到垂直居中）




全屏布局，避免使用在移动端可能出问题的position:fixed
思路是body,html都为100%，用一个div取代原本的body，div本身absolute且上下左右都为0，导航栏则左右为0拉伸上为0，指定高度，左侧边栏上下拉伸左为0，指定宽度，下边栏左右拉伸指定高度下为0（http://www.imooc.com/video/5178）