理解定位模式

position一共有幾個屬性

static：是position的預設屬性，它的位置取決於合模型；

absolute：絕對定位；

絕對定位的元素會完全地從常規文件流中脫離。對於包圍它的元素而言，它會將該絕對定位元素視為不存在，就像是漂浮起來一般。

通過 top, right, bottom, 和 left 四個屬性來設定絕對定位元素的位置。預設值都為 auto。

絕對定位的關鍵是知道它的起點在**。如果 top :20px,那麼你要知道這20px是從**開始計算的。

絕對定位的起點分兩種情況，一種是父元素是的position是static；另一種扶元素的position不是static。

也就是說當你在乙個元素的樣式上設定 position:absolute 意味著需要考慮父元素。

1: 如果父元素的 position 值不為 static ，那麼絕對定位元素的起點為父元素的左上角位置（以扶父元素為參照物）。

2: 如果父元素沒有應用除了 static 以外的 position 定位，那麼它會檢查父元素的父元素是否有應用非 static 定位。如果該元素應用了定位，那麼它的左上角便會成為絕對元素的起點位置。如果沒有則會繼續向上遍歷dom直到找到乙個定位元素或者尋找失敗以到達最外層的瀏覽器視窗。

relative：相對布局；

和絕對布局一樣通過 top, right, bottom, 和 left 四個屬性來設定絕對定位元素的位置。預設值都為 auto。

乙個元素設定成relative之後，也是向absolute一樣是漂浮起來的，但是是原地的漂浮，可以想象成，軍訓的時候，教官叫乙個同學出列，在他周圍的都原地不動，教官命令他前走50公尺，左走50公尺，也不影響他原先的佇列。這就是相對定位。

fixed：

固定定位的行為類似於絕對定位，但也有一些不同的地方。

首先，固定定位總是相對於瀏覽器視窗來進行定位的，並且通過哪些屬性的 top, right, bottom, 和 left 屬性來決定其位置。它拋棄了它的父元素，它就是定位中表現地有點兒反叛。。

第二個不同點是其在名字上是繼承的。固定定位的元素是固定的。它們並不隨著頁面的滾動而移動。你可以告訴元素它所處的位置並永遠不再移動。噢~好像還挺乖巧的。

在某種意義上說固定定位元素有點兒類似固定的背景，只不過它的外層容器塊總是瀏覽器視窗罷了。如果你在 body 中設定乙個背景那麼它與乙個固定定位的元素的行為時非常像的，只不過在位置上的精度會略少一些。

背景也不能改變其在第三個維度的大小，也因而帶來了 z-index 屬性。

inherit：繼承父元素；