一、常見定位方式
1.positon：absolute （脫離文檔流）
生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位 (這里的父元素是指定位方式為relative和absolute的父元素）。 如果一直沒找到 relative或者absolute定位的第一個父元素，則父元素為body。 絕對定位元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
2.positon：fixed（脫離文檔流）
生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
3.position:relative（未脫離文檔流，正常位置仍在）
生成相對定位的元素，相對於其文本流原始正常位置進行定位。例如，"left:20px" 會使元素相對於原始正常位置向左移動20像素。
比如：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 保證body充滿整個頁面 */ html,body{ width: 100%; height: 100%; /* 設置所有外邊距屬性為0 */ margin: 0; padding: 0; } .a { width:100px; height:100px; background-color: red; } .b { width:50px; height:50px; background-color: green; /* position: relative; top: 20px; */ } </style> </head> <body> <div class="a"></div> <div class="b"></div> </body> </html>
結果：
把上面代碼中的 下面兩行代碼 的注釋去掉，
position: relative;
top: 20px;
結果：
再比如：在上面的代碼中，再加入一個div
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 保證body充滿整個頁面 */ html,body{ width: 100%; height: 100%; /* 設置所有外邊距屬性為0 */ margin: 0; padding: 0; } .a { width:100px; height:100px; background-color: red; } .b { width:50px; height:50px; background-color: green; position: relative; top: 20px; } .c { width:50px; height:50px; background-color: yellow; } </style> </head> <body> <div class="a"></div> <div class="b"></div> <div class="c"></div> </body> </html>
結果：
結論：可以看出，class='b'的div設置為relative后，並沒有脫離文檔流，該div在文檔流中的原始位置仍然存在。因此在加了class='c'的div塊后，class='a'的div和class='c'的div之間的空隙就是class='b'的div大小，設置為relative的class='b'的div並沒有脫離文檔流，原始位置依然存在，占了一定空間。
4.position:static
默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
二、margin-top的理解
margin-top意思是設置元素的上外邊距，這個很好理解，但是在實際使用過程中，卻有一些新的理解體會。
1.給div1內部的div2設置一個margin-top，結果它的父級div1跟着div2一起下移了。或者給一個div1設置一個margin-top，不給div1內部的div2設置margin-top，結果div2跟着div1一起下移了。
如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 保證body充滿整個頁面 */ html,body{ width: 100%; height: 100%; /* 設置所有外邊距屬性為0 */ margin: 0; padding: 0; } .a { width:100px; height:100px; background-color: red; margin-top: 200px; } .b { width:50px; height:50px; background-color: green; } </style> </head> <body> <div class="a"> <div class="b"></div> </div> </body> </html>
結果：
將上面代碼中div嵌套順序換一下，發現仍然是整體下移。
<div class="b"> <div class="a"></div> </div>
結果：
這里只是因為class="b"的div更小，被class="a"的div覆蓋了，所以會看不到綠色div（其實是藏在紅色div下）。
2.兩個同級元素div1和div2（先div1再div2），給div1設置一個margin-top，結果div1和div2整體一起向下移動。（當div1在div2后面，給div1設置一個margin-top，不會出現兩個div整體下移情況）。
這里不再舉例說明
3.毗鄰的兩個兄弟元素之間的外邊距會塌陷。
如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>測試</title> <style> html,body{ margin:0; padding:0; } .div1{ width:400px; height:200px; background:red; margin-bottom:100px; } .div2{ width:400px; height:200px; background:yellow; /* margin-top:200px; */ } </style> </head> <body> <div class='div1'></div> <div class='div2'> </div> </body> </html>
結果：
當把 /* margin-top:200px; */注釋取消后，即：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>測試</title> <style> html,body{ margin:0; padding:0; } .div1{ width:400px; height:200px; background:red; margin-bottom:100px; } .div2{ width:400px; height:200px; background:yellow; margin-top:200px; } </style> </head> <body> <div class='div1'></div> <div class='div2'> </div> </body> </html>
結果：
分析：按照預期猜想的，應該是紅色div1的margin-bottom與黃色div2的margin-top疊加，最終使得兩個div的間隔為300px。但是我們看到，最終結果卻是200px，顯然不是疊加和。這是因為毗鄰的兩個兄弟元素之間的外邊距會塌陷，相鄰的兩個兄弟元素之間的外邊距會取兩者之間的最大值進行合並。由於100px小於200px，所以最終顯示的是200px的外邊距！
注：
①margin的值為百分數時，其值是基於父元素的寬度的百分比的外邊距(padding也是如此，當其為百分數時，其值是基於父元素的寬度的百分比的內邊距)。比如 margin-top:10%，是按照父親寬度的10%計算，而不是父親高度的10%。
②以上的情況的position是relative或者static，對於absolute結果會有些變化，嘗試了一下，設置為absolute（或者設置float，比如float:right）會使margin-top獨立，不會共享。
關於對margin合並的更多細節，可參考：https://www.jianshu.com/p/a7ead28910f4
結論：所有毗鄰的兩個或更多盒元素的margin將會合並為一個margin共享之。毗鄰的定義為：同級（按順序，前面的設置margin，后面的會共享margin）或者嵌套（沒有順序，子元素或者父元素任意一個設置margin，所有元素都會共享margin）的盒元素，並且它們之間沒有非空內容、Padding或Border分隔。