关于relative和absolute的总结-叫我爱运动小姐

 对于定位这个性质我原理上来说自己是明白的，但是在实践的过程中，总会出现各种稀奇古怪的情况，加relative或是absolute就可以解决，但是遇到这些情况总是不明白为什么！！！难道是脑容量太小的原因吗！！！=_=!! 
 还是先记基础知识好了，因为里面还是有很多坑！！ 
 相对定位： 
 　　　　内联元素加相对定位也不支持宽高！！ 
        relative并不会使元素脱离正常文档流！ 
        以上两点说明加上相对定位不影响元素本身的特性，内联元素和块元素依旧保持原来本身的特性！就是说原来是内联加上relative以后还是内联啦！ 
        如果不设置偏移量，相对定位本身并没有什么卵用~ 
      
        所以，相对定位要加偏移量，left/top/bottom/right是相对于该元素原来的位置设置偏移量的哦哦哦~ 

 绝对定位： 
 　　　　内联元素变得支持宽高啦~如果没有设置宽度，则内容撑开宽度！！（类似于float，内联元素加上float以后也支持宽高滴！！） 
 　　　　会使该元素完全脱离文档流 
        如果有父级定位则是相对于父级发生偏移，没有定位父级则是相对于body发生偏移！ 
 　　　　也是要搭配偏移量使用啦~ 

 如果直接在body里添加文字和一个
标签， 
 　　1. 给
设置absolute定位，不设置偏移量，则
定位在紧接着文字的下面 
 　　2. 给
设置absolute，并且设置偏移量，则
是按偏移量相对于body定位 
 　　3. 给
设置relative，不论是否设置偏移量，都是相对于自己的原来的位置定位。 
    

遮罩弹窗的实现：

   style  >  
body  {   height  :  100%  ;   margin  :  0  ;  }  
.shadow  {   position  :  absolute  ;   top  :  0  ;   left  :  0  ;   width  :  100%  ;   height  :  100%  ;   background  :  #000  ;   opacity  :  0.5  ;   filter  :  alpha(opacity=50)  ;  }  
.filter  {   width  :  300px  ;   height  :  200px  ;   border  :  2px solid #000  ;   background  :  yellow  ;   position  :  absolute  ;   top  :  50%  ;   left  :  50%  ;   margin-left  :  -152px  ;   margin-top  :  -102px  ;  } 
   style  > 


   body  >  
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent    br   />  
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent    br   />  
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent    br   />  
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent    br   />  
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent    br   />  
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent    br   />  
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent    br   />  
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent    br   />  
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent    br   />  
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent    br   />  
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent    br   />  
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent    br   />  
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent    br   />  
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent    br   /> 
       div   class  ="shadow"  >  div  > 
       div   class  ="filter"  >  div  > 
   body  >  

查看更多关于关于relative和absolute的总结-叫我爱运动小姐的详细内容...