頁面布局須知重點記，元素的布局定位模式 position 屬性

定位 (position)

為什麼要使用定位？

可以是實作某元素顯示在其他元素上面，可以固定盒子在螢幕的某個位置

三種布局的機制的上下順序：

标準流在最底層----浮動的盒子在中間層-----定位的盒子在最上層

定位也是布局的一種方式，有兩部分組成：定位=定位模式+邊偏移

我們定位的盒子是通過偏移來移動位置的

在css中，通過top、bottom、left、right元素定義元素的邊偏移：(方位名詞)

定位模式(position)

通過 position 屬性定義定位模式，文法：

選擇器{position：屬性值;}

屬性值：static 靜态定位

relative 相對定位

absolute 絕對定位

fixed 固定定位

1.靜态定位（static）

靜态定位是元素的預設定位方式，無定位意思。相等于none，

靜态定位按照标準流特性擺放，

2.相對定位（relative）

相對定位是元素相對于它原來在标準流中的位置來說的

特點：

相對于自己原來在标準流中的位置來移動

原來在标準流的區域繼續占有，後面的盒子仍然以标準流的方式對待他

3.絕對定位（adsolute）

絕對定位是元素以帶有定位的父級元素來移動位置

完全脫标 完全不占位置，父元素沒有定位，則以浏覽器為準定位，父元素要是有定位，将元素依據最近的定位（絕對、固定、相對定位）的父元素（祖先）進行定位。

特點：絕對定位是以帶有定位的父元素來移動位置的，若父元素沒有定位或沒有父元素則以浏覽器文檔為準移動位置。 不保留原來的位置

4.固定定位（fixed）

固定定位是絕對定位的一種特殊形式，若絕對定位是一個矩形，那固定定位就是正方形

特點：不原有占位置–完全脫标。 隻認浏覽器的可是可視視窗-----浏覽器視窗+邊偏移屬性來設定元素位置，跟父元素沒有任何關系，單獨使用，不随滾動條滾動。

補充：

堆疊順序（z-index）

在使用定位布局時，會出現盒子重疊的情況。預設後來者居上，後面的蓋住前面的

可以用z-index設定，層疊等級屬性可以調整盒子堆疊順序。

特性：

屬性值：正整數、負整數或0，預設0，資料值越大盒子越考上

屬性值相同按照後來居上規則

數值後面不加機關

z-index隻能應用于相對定位、絕對定位、和固定定位的元素，其他無效。

定位改變display屬性

絕對定位和固定定位也和浮動類似， 預設轉換的特性 轉換為行内塊。一個行内的盒子，如果加了浮動、固定定位和絕對定位，不用轉換，就可以給這個盒子直接設定寬度和高度等。

總結