浅谈块元素绝对定位的margin属性

对于div的绝对定位一直以为margin属性是无效的，只是通过top，left，bottom，right定位，然而今天的却发现不是这样的，于是对其做了些实验：

 

使用的HTML原始测试文件：

 

Html代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>test</title>  
  6. </head>  
  7.   
  8. <body>  
  9. <div class="wrapper">  
  10.     <div class="box">  
  11.         <div class="bottom"></div>  
  12.     </div>  
  13. </div>  
  14. </body>  
  15. </html>  

 

 

原始的测试css：

 

Html代码  收藏代码
  1. <style>  
  2. *{  
  3.     margin:0;  
  4.     padding:0;  
  5. }  
  6. .wrapper{  
  7.     width:400px;  
  8.     overflow:hidden;  
  9.     background:#000;  
  10.     margin:20px auto;  
  11.     position:relative;  
  12. }  
  13. .box{  
  14.     width:200px;  
  15.     height:400px;  
  16.     background:#F00;  
  17.     margin-left:40px;  
  18. }  
  19. .bottom{  
  20.     width:200px;  
  21.     height:40px;  
  22.     position:absolute;  
  23.     background:#0F0;  
  24.     top:0;  
  25.     left:0;  
  26. }  
  27. </style>  


 

   上面的图是普通的定义了top和left的，绝对定位的元素在父元素中寻找相对或绝对定位的并进行定位。

而要是这top和left不进行定义，则如下图：

 

Css代码  收藏代码
  1. .bottom{  
  2.     width:200px;  
  3.     height:40px;  
  4.     position:absolute;  
  5.     background:#0F0;  
  6. }  

 


 

则绝对定位元素对位参照上层父级元素。

 

 

Css代码  收藏代码
  1. .bottom{  
  2.     width:200px;  
  3.     height:40px;  
  4.     position:absolute;  
  5.     background:#0F0;  
  6.     top:30px;  
  7.     margin-top:-30px;  
  8. }  

 

上面代码的显示和上面的图是一样的。top的值是top和margin-top相加的值

下面的也是：

我们把margin-top的值改为30px;

则是下面的图：


说明上面的推断可能正确，总的top值是两个值的叠加。

 

 

下面我们用left方向来说明一下中间的.box的margin值对定位的作用：

 

 

Css代码  收藏代码
  1. .bottom{  
  2.     width:200px;  
  3.     height:40px;  
  4.     position:absolute;  
  5.     background:#0F0;  
  6.     top:30px;  
  7.     margin-top:30px;  
  8.     left:20px;  
  9. }  

 单单是left定位的话很容易猜到下图：



 而用单单用margin-left呢？

 

 

Css代码  收藏代码
  1. .bottom{  
  2.     width:200px;  
  3.     height:40px;  
  4.     position:absolute;  
  5.     background:#0F0;  
  6.     top:30px;  
  7.     margin-top:30px;  
  8.     margin-left:20px;  
  9. }  

 



 可以看到它是根据未用position定位的父级元素的边界进行margin定位的。

 

如果margin和left一起出现呢？

为了和前面的区别开来，我采用left：10px

 

 

 

Css代码  收藏代码
  1. .bottom{  
  2.     width:200px;  
  3.     height:40px;  
  4.     position:absolute;  
  5.     background:#0F0;  
  6.     top:30px;  
  7.     margin-top:30px;  
  8.     margin-left:20px;  
  9.     left:10px;  
  10. }  

 


 

可以看到绿色的块元素左溢出红块，以为现在的left值为30px。

 

这个在IE6中也同样适用：

 


 

现在我们可以得到结论了，当绝对定位块和上层相对定位（或绝对定位）中间夹着一层标准流（或浮动）的块时：

 

1、只使用left等定位是按照上层相对定位（或绝对定位）的边界进行定位

2、只使用margin相关属性定位时按照上层标准流（或浮动）块的边界进行定位

3、当同时使用两者时则按照上层相对定位（或绝对定位）的边界进行定位，并且距离值为两者的相加值

 

补充一点：

元素的上下和左右分别对应于哪层块互不干扰。

 

 

 

 

引申应用：

 

上述特点可以用来无hack地定位居中元素：

 

具体如下：

 

Css代码  收藏代码
  1. #con{  
  2.     position:absolute;  
  3.     left:50%;  
  4.     width:760px;  
  5.     margin-left:-380px;  
  6. }  

 上面的代码就是应用了得出的观点的第三点执行的，而且这种上面的定位方式是完全遵循Css原则的无hack的模式

posted @ 2016-04-22 09:57  AutismTune  阅读(2333)  评论(0)  编辑  收藏  举报