深入理解absolute

Posted 2020-08-15

 

 一、absolute和float

　　1.相同的特性表现：

　　<1>包裹性

　　<2>破坏性

注意：有时候，其页面布局可以相互替换--------float：；=position:absolute：

       2.clear用来限制float；relative用来限制absolute，独立的absolute可以摆脱overflow的限制，无论滚动还是隐藏。

          absolute越独立越强大！

　　 3.绝对定位的行为表现：

　　  <1>脱离文档流

　　  <2>去浮动

              float造成的环绕效果，absolute保持跟随效果，absolute存在时float失效

　　  <3>位置跟随

　　        元素是block那么absolute之后依然是block排列，inline时absolute后依然是inline排列。

　　   <4>超越overflow

　　　　　当父元素没有设置position：relatinve时，子元素position:absolute会超越父元素的overflow： :会显示父元素div以外的样式。

　　　　   当父元素设置了position：relative后，子元素就算设置了绝对定位，那么其都不会显示父元素以外的样式了。

    注意：在IE7下，任何元素采用绝对定位后，都会inline-block化

    解决办法: 在绝对定位元素外面套一层空div就OK

二、配合margin的精确定位

　　1.支持负值定位

　　2.兼容性超赞---可兼容IE6