CSS深入理解之absolute

1.独立的absolute可以摆脱overflow的限制，无论是滚动还是隐藏。

  

2.无依赖的absolute定位。

                              

                

折翼天使特性表现：1.去浮动（绝对定位生效时，浮动不起作用）；2.位置跟随。

3. 图片图标绝对定位覆盖

    

例子1：hot （左边子元素，右边父元素），以下方法的好处：父标签没有多余的relative属性，更干净；其次，其自适应性更强。

           

         

例子2：下拉框定位

      

 

例子3：居中以及边缘对齐定位

   

边缘对齐最佳实现：

  

例子（4,5,6）：

                                                    星号对齐（*）                                                                                                             图标

   

超出外部容器尺寸，但没换行：

   

无依赖绝对定位为页面布局与重构提供了更加广阔的选型新思路 !

4. 脱离文档流

   回流与重绘   tip：动画尽量作用在绝对定位元素上！（自身在动，不会影响其他元素）。

   后来居上    z-index潜在误区：绝对定位元素都需要z-index控制层级，确定其显示的垂直位置。

  

5. left/ top/ right/ bottom与width/ height 异曲同工与特殊表现

 

          

  

        

               

6. 绝对定位整页布局

         

              

  

         

         

备注: 以上内容摘自http://www.imooc.com/learn/192 ,感兴趣的同学可以前往观看！