關於CSS的定位問題，你需要注意的一些坑

css中的定位類型一覽
position這個css屬性允許我們指定元素的定位類型。

css定位選項
static是此屬性的預設值。這時候，我們稱那個元素沒有被定位。為了定位它，我們需要改變預定義的類型。 為了改變預定義類型，我們將position的屬性值設定為下面中的一個：

relative
absolute
fixed
sticky
只有設定了之後，我們才能使用offset參數來為我們的元素指定我們想要的位置：

top
right
bottom
left
這些屬性的初始值是關鍵字“auto”
我們需要記住一點，當一個元素的position被設定為absolute或者fixed，我們稱之為一個絕對位置元素。同樣，注意一個被定位的元素可以用z-index屬性來指定他的堆疊順序。
CSS定位類型的主要差別
現在，讓我們簡單的討論下這些定位類型之間的三個關鍵差別：
一個—絕對位置的元素是完全脫離正常流的。鄰近的兄弟節點元素會佔據它的位子。
一個相對或者粘性定位的元素保留他們的位置。鄰近的元素不會佔據這個元素保留的空間。然而，這個元素的位移量（offsets）不會佔據空間。他們完全忽略其他的元素，因此這可能會與其他元素相互重疊。
一個絕對（fixed）定位的元素（記住：fixed是absolute定位的一個子類）經常相對於視圖的定位（除了一個有transform屬性的父元素，最新版本的案頭瀏覽器都支援這種行為）。
一個粘性的定位元素是相對於最近的可滑動的父元素（比如：overflow:auto）.如果沒有這種父元素，它就相對於視圖定位。
在接下來的案例中，我們將探索這些類型的定位是如何啟動並執行：

看一下Pen定位概述 by George (@georgemarts) 在CodePen上.

注意：粘性定位類型依然被認為是實驗性的技術，並且瀏覽器支援有限.當然，如果你想要，你可以將方法加入不支援的瀏覽器。鑒於他有限的支援，我們在接下來的文章中不會提到這個屬性。
絕對位置類型的定位元素
我相信你們中許多人已經知道絕對位置是如何?的了。然而這個定位類型是需要技巧的並且容易迷惑新手設計者。

因為這個原因，我決定將此列入鮮為人知的概念列表之中（包括相應的執行個體），涵蓋在這片文章之中。

因此，一個定位類型被設定成絕對位置的元素是相對於它最近的父元素。當然，這僅僅在定位類型不是‘staic’的情況下有效。考慮到這一點，如果元素沒有任何定位的父元素，那麼它是相對於視圖定位。

為瞭解釋這種行為，看下面的線上執行個體：

看一下Pen絕對位置類型的定位元素 by George (@georgemarts) 在CodePen上.

在這個執行個體中，我們給綠盒子一個初始的絕對位置類型，設定他的位移量（offsets）為bottom:0和left:0。此外，我們不需要給直接父元素（紅盒子）一個特定的定位類型。

然而，我們相對定位父元素（比如：一個class為jumbotron的元素）。只要我們改變他父元素的定位類型，注意綠盒子的定位是如何改變的。

絕對位置的元素無視了float 這個屬性

如果一個元素是浮動左或右，而且我們將此定位類型設定為 ‘absolute’ 或者 ‘fixed’ ，那麼float的屬性就會被設定為 ‘none’ .另一方面，如果我們將定位類型設定成relative，那麼元素依然包含浮動的屬性。
看一個相關的例子：
看一下Pen絕對位置的元素無視了float 這個屬性 by George (@georgemarts) 在CodePen上.

在這個例子中，我們將兩個不同的元素定義為 float:right. 注意當紅盒子變成了絕對位置的元素，這就無視了 float 屬性，然而相對定位的綠盒子保留了他float的值。

內嵌元素如果被設定為絕對位置，那麼他會表現出區塊層級元素的特徵

一個內嵌元素，如果他的position設定為 absolute或者fixed，那麼它就有區塊層級元素的屬性。這張表總結什麼類型的元素被轉換成區塊層級元素。

這裡有一個例子：

看一下Pen內嵌元素如果被設定為絕對位置，那麼他會表現出區塊層級元素的特徵 by George (@georgemarts) 在CodePen上.

在這個例子中，我們定義兩個不同元素。第一個（比如：綠盒子）為區塊層級元素（比如：div）。第二個（比如：紅盒子）為內嵌元素（如 span）。注意只有綠盒子有顯示。

紅盒暫時沒有出現，因為我們給它的 width 和 height的這兩個屬性，這屬性只能用於區塊層級元素和內嵌元素。外加，這是一個空元素（不包含任何子項目比如文本節點）。 譯者ps：不知道是不是這裡寫錯了 寬高屬性只能用於區塊層級元素，用在內嵌元素上，不會有效果

記住如果我們設定定位的類型是absolute或者fixed，元素會呈現出區塊層級元素的特性。

一個內嵌元素，如果他的position設定為 absolute或者fixed，那麼它就有區塊層級元素的屬性。這張表總結什麼類型的元素被轉換成區塊層級元素。

這裡有一個例子：

看一下Pen內嵌元素如果被設定為絕對位置，那麼他會表現出區塊層級元素的特徵 by George (@georgemarts) 在CodePen上.

在這個例子中，我們定義兩個不同元素。第一個（比如：綠盒子）為區塊層級元素（比如：div）。第二個（比如：紅盒子）為內嵌元素（如 span）。注意只有綠盒子有顯示。

紅盒暫時沒有出現，因為我們給它的 width 和 height的這兩個屬性，這屬性只能用於區塊層級元素和內嵌元素。外加，這是一個空元素（不包含任何子項目比如文本節點）。 譯者ps：不知道是不是這裡寫錯了 寬高屬性只能用於區塊層級元素，用在內嵌元素上，不會有效果

記住如果我們設定定位的類型是absolute或者fixed，元素會呈現出區塊層級元素的特性。

外邊距（margins）不會在絕對位置的元素上合并

預設情況下，當兩個垂直外邊距互相接觸，他們之間的間距會取得兩個之間比較大的外邊距。這種行為可以理解為外邊距合并.

就像在一個浮動的元素上的外邊距一樣，一個絕對位置元素的外邊距不會和其他外邊距合并。

思考下下面的例子：

看一下Pen外邊距（margins）不會在絕對位置的元素上合并 by George (@georgemarts) 在CodePen上.

在這個例子中個，最初的元素的外邊距等於20px。此外，他的top外邊距和父元素的top外邊距重疊了，這也是20px。正如你所見，只有當我們絕對位置元素，這個top外邊距才不會和父元素的相關外邊距重疊。

但是，我們該如何防止外邊距合并。當然，我們需要放些東西放去分開他們。

比如說，舉個例子，有一點內邊距或者邊框（我們可以把這條規則用於父元素或者子項目）。另一個選擇是添加clearfix類（在我的例子中）到父元素之中。

用px和百分比定位元素
你用過百分比而不是px來定義定位元素的位移量（offsets）嗎。如果答案是是的，你可能會發現座標值的計算和你選擇的CSS單位是不一樣的（比如px或者百分比）。
這看上去有點迷惑，是吧。因此讓我看下規範中關於聲明為百分比的位移量。

位移量是包含框的寬度（對於left或者right）或者高度（對於top和bottom）的百分比。對於黏著定位的元素，位移量是底部的寬度（對於left或者right）或者高度（對於top和bottom）的百分比。負值也是允許的。

也就是說，只要我們定義位移量為百分比，目標元素的定位就依賴於父元素的寬（對於左右的位移量）和高（對於上下的位移量）。

下面的例子說明了差別： 看一下Pen用px和百分比定位元素 by George (@georgemarts) 在CodePen上.

在這個例子中，我們用px和百分比移動元素。很明顯，當位移量是px的時候，元素按照我們所期待地移動。又快又好。

相反的是，當我們用百分比作為css單位的時候，元素的定位按照它父元素的尺寸。這裡有一個有用的可視化告訴你新位置（用百分比）是如何計算的。

注意：你也已經許知道，transform屬性（伴隨著不同的translate方法）也可以讓我們改變元素的位置。但是，請記住如果我們使用百分比作為css單位，那麼元素會相對於他的尺寸定位並且不是相對於父元素尺寸定位（和位移量（offsets）不一樣）。

結論
我希望這篇文章能夠協助你牢固掌握css定位布局方式並且突出一些可能會迷惑的css概念。 我喜歡你們在下方的評論中分享你們的想法，問題或者建議。感謝你們的閱讀。