CSSposition:absolute浅析

一、绝对定位的特征

绝对定位有着与浮动一样的特性，即包裹性和破坏性。

就破坏性而言，浮动仅仅破坏了元素的高度，保留了元素的宽度；而绝对定位的元素高度和宽度都没有了。

请看下面代码：

  1     DOCTYPE html  > 
  2     html  > 
  3         head  > 
  4             meta   charset  ="utf-8"  > 
  5             title  > 绝对定位的特征   title  > 
  6             style  > 
  7               .box1,.box2,.box3   { 
  8                   background-color  :   orange  ; 
  9                   margin-bottom  :   30px  ; 
 10               } 
 11  
 12               .absolute   { 
 13                   position  :   absolute  ; 
 14               } 
 15  
 16               .wraper   { 
 17                   display  :  inline-block  ; 
 18                   margin-left  :   300px  ; 
 19               } 
 20  
 21               .float   { 
 22                   float  :   left  ; 
 23               } 
 24              
 25               .box3   { 
 26                   position  :   absolute  ; 
 27               } 
 28             style  > 
 29         head  > 
 30         body  > 
 31             div   class  ="box1"  > 
 32                 img   src  ="http://a.hiphotos.baidu测试数据/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg"   alt  ="A picture"   style  ="width:175px;height:100px"   /> 
 33                 img   src  ="http://pic1.win4000测试数据/wallpaper/c/537b28b60619b.jpg"   alt  ="A picture"   style  ="width:240px;height:180px"   /> 
 34                 p  > 这是普通流中的两幅图像。   p  > 
 35             div  > 
 36             div   class  ="box2"  > 
 37                 img   class  ="absolute"   src  ="http://a.hiphotos.baidu测试数据/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg"   alt  ="A picture"   style  ="width:175px;height:100px"   /> 
 38                 img   src  ="http://pic1.win4000测试数据/wallpaper/c/537b28b60619b.jpg"   alt  ="A picture"   style  ="width:240px;height:180px"   /> 
 39  
 40                 div   class  ="wraper"  > 
 41                     img   class  ="float"   src  ="http://a.hiphotos.baidu测试数据/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg"   alt  ="A picture"   style  ="width:175px;height:100px"   /> 
 42                     img   src  ="http://pic1.win4000测试数据/wallpaper/c/537b28b60619b.jpg"   alt  ="A picture"   style  ="width:240px;height:180px"   /> 
 43                 div  > 
 44                 p  > 左图，将第一幅图像绝对定位，其完全脱离文档流，并且覆盖在第二幅图像之上；由此看出，绝对定位的破坏性不仅让元素没有了高度，甚至没有了宽度。   p  > 
 45                 p  > 右图，将第一幅图像左浮动，其虽然脱离了文档流，但是并没有覆盖在其他元素之上；浮动的破坏性仅仅破坏了元素的高度，而保留了元素的宽度。   p  > 
 46             div  > 
 47             div   class  ="box3"  > 
 48                 img   src  ="http://a.hiphotos.baidu测试数据/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg"   alt  ="A picture"   style  ="width:175px;height:100px"   /> 
 49                 img   src  ="http://pic1.win4000测试数据/wallpaper/c/537b28b60619b.jpg"   alt  ="A picture"   style  ="width:240px;height:180px"   /> 
 50                 p  > 将容器绝对定位，体现其包裹性。   p  > 
 51             div  > 
 52         body  > 
 53     html  >  

查看更多关于CSSposition:absolute浅析的详细内容...