CSSabsolute与relative不得不说的故事

写在开篇：

absolute说：[relative，我这辈子都不想看见你！]

为什么呢？它们明明那么相亲相爱，形影不离，这之中到底发生了什么不为人知的故事，竟然让absolute如此讨厌relative？

要想找到问题的答案，请跟我来。。。

relative对absolute的限制之一

absolute，拥有top、right、bottom、left四项技能，从此天高任鸟飞，海阔任鱼跃；本来想去哪儿就去哪儿，自由自在，生活是那么地美好。

直到有一天，在出去玩的路上，遇到一个relative，跳出来大喊一声；[此山是我开，此树是我栽，要从此路过，留下买路财！]

然后，我们可爱哒absolute小朋友就乖乖地屈服了。

但是无良的relative收到好处居然还不放行，死活不让absolute过去。。。额，这个故事就是这样子的。。。相信大家都懂的。。。

额，还是写个demo吧，看这里：

  1     DOCTYPE html  > 
  2     html  > 
  3         head  > 
  4             meta   charset  ="utf-8"  > 
  5             title  > relative对absolute的限制1   title  > 
  6             style  > 
  7               .box   { 
  8                   width  :  500px  ; 
  9                   height  :  250px  ; 
 10                   background-color  :   pink  ; 
 11                   margin  :  30px auto 50px  ; 
 12                   line-height  :   250px  ; 
 13                   text-align  :  center  ; 
 14               } 
 15  
 16               .box p   { 
 17                   display  :   inline-block  ; 
 18                   vertical-align  :   middle  ; 
 19                   width  :  300px  ; 
 20                   font-size  :   16px  ; 
 21                   line-height  :   1.5  ; 
 22                   text-align  :   left  ; 
 23               } 
 24  
 25               .box2 p   { 
 26                   margin-left  :   30px  ; 
 27               } 
 28  
 29               .box img   { 
 30                   position  :   absolute  ; 
 31                   left  :  0  ; 
 32                   top  :  0  ; 
 33               } 
 34  
 35               .box2   { 
 36                   position  :   relative  ; 
 37               } 
 38  
 39             style  > 
 40         head  > 
 41         body  > 
 42             div   class  ="box box1"  > 
 43                 img   src  ="http://imgsrc.baidu测试数据/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt  ="A picture"   style  ="width:100px;height:150px"   /> 
 44                 p  > 今天，absolute小朋友出去玩啦，开启left:0; top:0; 这个组合技能，一切顺利，到达了天边。   p  > 
 45             div  > 
 46  
 47             div   class  ="box box2"  > 
 48                 img   src  ="http://imgsrc.baidu测试数据/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt  ="A picture"   style  ="width:100px;height:150px"   /> 
 49                 p  > 今天，absolute小朋友又出去玩啦，同样开启left:0; top:0; 这个组合技能，但是天公不作美，出门就碰到relative这个坏家伙，于是止步于relative的地方。   p  > 
 50             div  > 
 51         body  > 
 52     html  >  

查看更多关于CSSabsolute与relative不得不说的故事的详细内容...