一    
    
    
    
  、什么是定位？

css中的position属性    
    
    
    
  ，position有四个值：relative（相对定位）


     


     


     


     
、absolute（绝对定位）
 




 




 




 




、static（静态定位）和fixed（固定定位）


     


     


     


     
，通过top   

   

   

   

 、left 

     

     

     

     、bottom

  




  




  




  




、right来调整元素位置

二  


  


  


  


、各个属性值的作用

属性值 作用 备注 relative 相对定位 参考元素本身 absolute 绝对定位 参考最近的祖先元素 static 静态定位 基本定位规定 fixed 固定定位 参考浏览器窗口

1  
     
     
     
     、相对定位

相对定位的偏移元素参考的是元素本身
 




 




 




 




，不会使元素脱离文档流   

   

   

   

 ，元素的初始位置占据的空间会被保留

html代码：

css代码：

网页效果：

可以看出相对定位是相对于元素本身来说 

     

     

     

     ，其中距离顶部30px

  




  




  




  




，距离左边20px  


  


  


  


，并且没有脱离文档流

2


   




   




   




   



、绝对定位

绝对定位是相对于已定位的最近的祖先元素  
     
     
     
     ，如果的最近的祖先元素没有设置定位


   




   




   




   



，那么它的位置就相对于最初的包含块（body）

css代码：

网页效果：

可以看到绝对定位脱离文档流 



 



 



 



，由于父级元素未进行定位                      ，所以是以最初的包含块（body）进行定位



    




    




    




    


，现在将该元素的父级元素进行定位

css代码：

网页效果：

这里父级元素定位之后



















，该元素是以父级元素来进行定位

3 



 



 



 



、静态定位

没有特别的设定                      ，不脱离文档流



     



     



     



     

，遵循基本的定位规定



















，不能通过z-index进行层次分级

css代码：

网页效果：

可以看出红色块位置没变    
    
    
    
  ，可以知道static（静态


     


     


     


     
，默认属性）通常情况下不会使用
 




 




 




 




，position值一般为默认

4                      、固定定位

固定定位相对于浏览器窗口   

   

   

   

 ，脱离文档流 

     

     

     

     ，使用fixed的元素不会随窗口的滚动而滚动

html代码：

css代码：

网页效果（未设定固定定位）：

网页效果（设定固定定位）

可以看出进行固定定位后

  




  




  




  




，即使窗口进行滚动  


  


  


  


，红色块的位置不变

三



    




    




    




    


、相对和绝对定位

将三个色块来区别相对定位和绝对定位

未进行定位时  
     
     
     
     ，默认网页效果：

1



















、相对定位

css代码：

网页效果：

可以看出相对定位和默认定位效果是一样的

2                      、绝对定位

css代码：

网页效果：

这里红



     



     



     



     

、黄



















、蓝色块重叠显示了


   




   




   




   



，即脱离文档流

3    
    
    
    
  、相对定位和绝对定位

为了使效果更加明显 



 



 



 



，这里将红


     


     


     


     
、黄
 




 




 




 




、蓝三色块进行一定程度的偏移

（1）相对定位

css代码：

网页效果：

（2）绝对定位

css代码：

网页效果：

四   

   

   

   

 、相对 

     

     

     

     、绝对定位与浮动

绝对定位和浮动都脱离文档流

1

  




  




  




  




、相对定位

css代码：

网页效果：

2  


  


  


  


、绝对定位

css代码：

网页效果：

3  
     
     
     
     、浮动

css代码：

网页效果：

可以看到浮动（float）为文字包围红色色块                      ，但文本与红色色块的距离过近



    




    




    




    


，无法设定边距

4


   




   




   




   



、相对定位与浮动

css代码：

网页效果：

相对定位和浮动结合可以设定文本与红色色块的边距

5 



 



 



 



、绝对定位和浮动

css代码：

网页效果：

五                      、z-index的使用

若要将下面的色块中红色色块显示在黄色色块上面



















，可以使用z-index

css代码：

网页效果：

可以看到红色色块显示在红色色块上面                      ，这里z-index的数值为40,20,30



     



     



     



     

，实际上网页有时不止这些



















，可能上百    
    
    
    
  ，这里只是为了方便显示

六



    




    




    




    


、小结

相对定位作为绝对定位的父一级元素出现


     


     


     


     
，给绝对定位作为参照物 相对定位：以自己作为参照物

绝对定位：以父一级元素作为参照物 相对定位和浮动

将两者的特点结合
 




 




 




 




，进行浮动和偏移 绝对定位和浮动

绝对定位：忽略绝对定位所占用的位置

浮动：绕过浮动所占用的位置