CSS 定位機制
CSS 有三種基本的定位機制：普通流、浮動和絕對定位。
一、普通流
除非專門指定，否則所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置決定。塊級元素從上到下依次排列，框之間的垂直距離由框的垂直margin計算得到。行內元素在一行中水平布置。
二、定位
１、相對定位
被看作普通流定位模型的一部分，定位元素的位置相對於它在普通流中的位置進行移動。使用相對定位的元素不管它是否進行移動，元素仍要占據它原來的位置。移動元素會導致它覆蓋其他的框。
<html> <head> <style type="text/css"> .box1{ background-color: red; width:100px; height:100px; } .box2{ background-color: yellow; width:100px; height:100px; position: relative; left: 20px; } .box3{ background-color: blue; width:100px; height:100px; position: relative; right: 20px; } </style> </head> <body> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> </body> </html>
效果如下圖所示：
２、絕對定位
相對於已定位的最近的祖先元素，如果沒有已定位的最近的祖先元素，那么它的位置就相對於最初的包含塊（如body）。絕對定位的框可以從它的包含塊向上、右、下、左移動。
絕對定位的框脫離普通流，所以它可以覆蓋頁面上的其他元素，可以通過設置Ｚ-Iindex屬性來控制這些框的堆放次序。
<!doctype html> <html> <head> <meta charset="utf-8"> <style> *{margin: 0; padding: 0;} #div1 { width: 200px; height: 200px; background: yellow; } #div2 { width: 50%; height: 50%; background: red; top: 100px; left: 100px; position: absolute; } </style> </head> <body> <div id="div1"> <div id="div2"></div> </div> </body> </html>
效果如下圖所示：
備注：相對於已相對定位的祖先元素對框進行絕對定位，在大多數現代瀏覽器中都可以實現的很好。
３、固定定位
相對於瀏覽器窗口，其余的特點類似於絕對定位。
三、浮動
浮動的框可以在左右移動，直到它的外邊框邊緣碰到包含框或另一個浮動框的邊緣。浮動的框脫離普通流。
如果包含塊太窄，無法容納水平排列的浮動元素，那么其他浮動塊向下移動，直到有足夠多的空間。如果浮動元素的高度不同，那么當它們向下移動時可能會被其他浮動元素卡住。
行內元素會圍繞着浮動框排列。
可參考CSS float 屬性
請看下圖，當把框 1 向右浮動時，它脫離文檔流並且向右移動，直到它的右邊緣碰到包含框的右邊緣：
再請看下圖，當框 1 向左浮動時，它脫離文檔流並且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文檔流中，所以它不占據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。
如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。
如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”：
清除浮動
簡單介紹下清除浮動的2中方法。
方法一：結合:after選擇器清除浮動。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box1 { border: 1px solid red; background-color: yellow; } .clear:after { content: "." ; display: block; height: 0; visibility: hidden; clear: both; } .box2 { width: 50px; height: 50px; float: left; background-color: orange; } p { float: right; } </style> </head> <body> <div class="box1 clear"> <div class="box2"> box2 </div> <p> lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 </p> </div> </body> </html>
方法二，在容器最后添加一個空元素並且清理它。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box1 { border: 1px solid red; background-color: yellow; } .empty{ clear: both; } .box2 { width: 50px; height: 50px; float: left; background-color: orange; } p { float: right; } </style> </head> <body> <div class="box1 clear"> <div class="box2"> box2 </div> <p> lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 </p> <br class="empty" /> </div> </body> </html>
效果均如下所示：
附錄：
CSS position 屬性總結：
所有主流瀏覽器都支持 position 屬性。position屬性規定元素的定位類型，影響元素框生成的方式。
可能的值
| 值 | 描述 |
|---|---|
| absolute | 生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位，如果不存在這樣的父元素，則依據最初的包含快。根據用戶代理的不同，最初的包含塊可能是畫布或 HTML 元素。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定，也可以通過z-index進行層次分級。 （元素框從文檔流完全刪除，並相對於其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。） |
| fixed | 生成固定／絕對定位的元素，相對於瀏覽器窗口進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 （元素框的表現類似於將 position 設置為 absolute，不過其包含塊是視窗本身。） |
| relative | 生成相對定位的元素，相對於其正常位置進行定位。 因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。 （相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。元素框偏移某個距離。元素仍保持其未定位前的形狀，仍保留原本所占的空間。 ） |
| static | 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明，即上述聲明無效）。 （元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創建一個或多個行框，置於其父元素中。） |
| inherit | 規定應該從父元素繼承 position 屬性的值。 |
CSS 定位屬性
CSS 定位屬性允許你對元素進行定位。
| 屬性 | 描述 |
|---|---|
| position | 把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。 |
| top | 定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。 |
| right | 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。 |
| bottom | 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。 |
| left | 定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。 |
| overflow | 設置當元素的內容溢出其區域時發生的事情。 |
| clip | 設置元素的形狀。元素被剪入這個形狀之中，然后顯示出來。 |
| vertical-align | 設置元素的垂直對齊方式。 |
| z-index | 設置元素的堆疊順序。 |