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的宽高都是塌陷的,其实体位置不像浮动那样存在。(宽度缺失使指该元素本该占有的宽度不再存在)
1. 脱离文档流(你懂的,就是不占据实质空间了)
2. 去浮动(即原本有float属性的话,若再设置absolute,float被覆盖)
3. 位置跟随 (原本一行显示文字,下面一行显示的是block的div,我们将div进行absolute
化后,div位置并不会发生变化。)(原本几个inline-block元素放在一起,将中间的div进行absolute化,这个div的位置依然不变,后面的元素会往前挤)
跟随性实例
根据上述属性,我们就可以做出一些效果。比方说在一个图片的左上角,右上角摆点东西,比如什么‘热销’啊,‘vip’啊什么的,如下
第二个i标签,因其也是absolute,所以其不占任何实体空间。如果没有img和i标签之间的注释,那么第二个i标签会换行显示,这是因为inline-block元素之间本就会产生空格的缘故,现在用注释去掉了这个空格后,又因为absolute元素不占空间,所以理所当然的紧跟在了img后,且没换行,这样利用margin-left负值就可以让这个元素显示在右上角了
实例
想要实现百度搜索里的搜索提示效果,只要让提示框元素作为父容器的第一个元素,且absolute,之后margin-top搜索框的高度,就可以 了
怎么用absolute让一个元素居中呢?
父容器的text-align:center是无法控制到脱离文档流的元素的,但因为absolute的跟随性,我们可以在该absolute元素前放置一个 ,这样设置父容器的text-align:center就让 走到中间去了,同时,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)
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就让 走到中间去了,同时,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)