2. 程式人生 > >margin對css絕對定位的影響

margin對css絕對定位的影響

阿新 • • 發佈：2018-12-31

試驗css絕對定位時，跟自己預想的不太一樣，有點迷，查了之後才發現還有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. <body>  
  8. <div class="wrapper">  
  9.     <div class="box">  
  10.         <div class="bottom"></div>  
  11.     </
    div>  
  12. </div>  
  13. </body>  
  14. </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、當同時使用兩者時則按照上層相對定位（或絕對定位）的邊界進行定位，並且距離值為兩者的相加值

4、對於不使用left也沒有margin的，自動按照上層標準流進行定位

補充一點：

元素的上下和左右分別對應於哪層塊互不干擾。

引申應用：

上述特點可以用來無hack地定位居中元素：

具體如下：

Css程式碼  收藏程式碼
  1. #con{  
  2.     position:absolute;  
  3.     left:50%;  
  4.     width:760px;  
  5.     margin-left:-380px;  
  6. }  
 上面的程式碼就是應用了得出的觀點的第三點執行的，而且這種上面的定位方式是完全遵循Css原則的無hack的模式

以下內容個人補充，與轉載無關：

<P>元素的margin同樣有影響，可以個人試驗一下；

首先<p>標籤在主流瀏覽器是有預設的margin值的：預設margin：12px 0;所以實驗之前先設定所有的p標籤margin:0;

相關推薦

margin對css絕對定位的影響

試驗css絕對定位時，跟自己預想的不太一樣，有點迷，查了之後才發現還有margin的影響。。。。 正文： 對於div的絕對定位一直以為margin屬性是無效的，只是通過top，left，bottom，right定位，然而今天的卻發現不是這樣的，於是對其做了些實

小tip: margin:auto實現絕對定位元素的水平垂直居中

實現 可用 偏移 css代碼 百度 add 包含塊 統計 ica 轉載自：http://www.zhangxinxu.com/wordpress/?p=3794 一、絕對定位元素的居中實現 如果要問如何CSS實現絕對定位元素的居中效果，很多人心裏已經有答案了。 兼容性不

css絕對定位、相對定位和文件流的那些事(非本人)

                HTML是流式文件，所以HTML預設佈局就是流式佈局，這裡所說的流式佈局怎麼理解呢？所謂了流式             &nb

CSS:絕對定位和相對定位

CSS:絕對定位和相對定位 ​ CSS定位一直以來都是建立網頁佈局很重要的一部分。儘管有一些新的CSS佈局例如Flexbox和CSS Grid出現。定位依舊在任何一個網頁設計者的佈局技巧中佔有著重要的位置。 static （靜態） absolute （絕對）

css絕對定位總結

通常我們使用position:absolute；position:relative進行絕對定位佈局，通過CSS進行定義定位，DIV佈局HTML，注意什麼地方使用position:relative，什麼地方使用position:absolute進行定位，同時不要忘

css 絕對定位和相對定位

絕對定位 絕對定位值的是通過規定HTML元素在水平和垂直方向上的位置來固定元素，基於絕對定位的元素不佔據空間。 絕對定位的位置宣告是相對於已定位的並且包含關係最近的祖先元素。如果當前需要被定位的元素沒有已定位的祖先元素做參考值，則相對於整個網頁。  例項1： <

css絕對定位和相對定位例項。

先寫一段簡單程式碼：<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-wi

css絕對定位後居中顯示文字

在圖片底部居中顯示文字，直接上程式碼： <style> .main { width:300px; height:200px; text-align:center; } .t

CSS絕對定位absolute詳解

dde title 簡單 pic position app 探討 滾動條 cimage 轉:https://www.jianshu.com/p/a3da5e27d22b 之前介紹過CSS浮動float詳解，本篇介紹的絕對定位abso

深入理解CSS絕對定位

CSS中有3種定位機制：普通流，浮動和絕對定位。除非專門指定，否則所有框都在普通流中定位。顧名思義，普通流中元素框的位置由HTML元素的位置決定。塊級框一個接一個地垂直排列，框之間的垂直距離由框的垂直外邊距計算出。在本文中，我們主要講解3種定位機制之一的絕對定位，這就需要深入瞭解relative（相對定位），

CSS之絕對定位

用戶 note alt src 基礎 讓我 blue 分享 出現 w3school定義： 絕對定位的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麽它的位置相對於最初的包含塊。 對於定位的主要問題是要記住每種定位的意義。所以，現在讓我們復習一下學

css關於相對定位與絕對定位

css 1.一般如果我們不給元素設置position，則默認為static，此時是該元素是沒有定位的，像left/right這些偏移屬性都是沒有效果的。 2.position:relative （相對定位） 若設置為相對定位，即可配置left/right這些偏移，相對於該元素原有位置

關於子元素的margin-top溢出和元素浮動對父元素高度影響解決方案

20px oat -- 外邊距 生成 round border top display 以下是個人學習筆記，僅供學習參考。 1.關於子元素的margin-top作用在無margin-top-border的父元素上導致子元素的margin-top溢出問題。 在給沒有margi

盤點8種CSS實現垂直居中水平居中的絕對定位居中技術

其他 margin phone ie10 logs html mar over 防止 1.絕對定位居中（Absolute Centering）技術 　　我們經常用margin:0 auto;來實現水平居中，而一直認為margin:auto;不能實現垂直居中......實際上

CSS練習絕對定位於頁面寬度自適應

ear family vertica 寬度 content back left display splay <!DOCTYPE html> <html> <head> <title>九宮格布局</title&g

css中絕對定位和相對定位，文檔流的理解

css 定位 相關鏈接：http://blog.csdn.net/libertea/article/details/11662661 今天在這裏看到了關於一個定位的博客，感覺講的挺好的，在這裏分享一下鏈接。css中絕對定位和相對定位，文檔流的理解

【轉載】CSS之絕對定位及相對定位

通過 原本 second span sof 動手 lan 根據 為什麽 我們先來看看CSS3 Api中對position屬性的相關定義： static：無特殊定位，對象遵循正常文檔流。top，right，bottom，left等屬性不會被應用。 relative：對象遵

UI自動化測試（二）瀏覽器操作及對元素的定位方法（xpath定位和css定位詳解）

cli 刷新 ota api enter 版本 ror apache 窗口 Selenium下的Webdriver工具支持FireFox(geckodriver)、 IE(InternetExplorerDriver)、Chrome(ChromeDriver)、 Opera

絕對定位後，position:absolute;不能使用margin: 0 auto;實現居中；

com height test 指點 meta color img absolut ext 聲明： web小白的筆記，歡迎大神指點！聯系QQ：1522025433. 我們都知道margin: 0 auto；可也實現塊狀元素的水平居中；但是對於絕對頂為的元素就會失效； 請

[原創] css中的絕對定位和相對定位

www. relative get 邊界 原創 html 初始 一個 有關 我對博客的認識是：記錄問題，解決問題，分享知識。如果有輪子，我不需要造輪子。 　 首先，定位無論是相對定位還是絕對定位，必須有一個參考項，而這個參考項，專業術語稱之為 包含塊，這裏的包含塊是指