碼上歡樂
相關內容    簡體    繁體

淺談塊元素絕對定位的margin屬性

本文轉載自   查看原文   2016-04-22 09:57   1867    css

對於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的模式


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 行內塊元素 、塊元素、內聯元素關於text-align：center margin：0 auto的比較 行內元素和塊級元素的具體區別是什么？行內元素的padding和margin可設置嗎？ 給行內元素加上絕對定位之后，元素屬性的變化 大前端學習筆記整理【三】行內元素與塊級元素的區別以及絕對定位與固定定位的差異 xpath使用屬性元素定位，包含 and 、or、not 關於元素設置margin-top能夠改變body位置的原因及解決（子元素設置margin-top改變父元素定位） 浮動元素margin負值的應用 [HTML/CSS]margin屬性用法 元素顯示模式：塊元素 & 行內元素 & 行內塊元素 什么是行內元素、塊級元素?
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM