關於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概念。 我喜歡你們在下方的評論中分享你們的想法，問題或者建議。感謝你們的閱讀。