css position是前端的你瞭解多少？

此文根據Steven Bradley的《How Well Do You Understand CSS Positioning?》所譯，整個譯文帶有我本身的理解與思想，若是譯得很差或不對之處還請同行朋友指點。

當人們剛接觸佈局的時候都比較傾向於使用定位的方式。由於定位的概念看起來好像比較容易掌握。表面上你確切地指定了一個塊元素所處的位置那麼它就會坐落於那裏。但是定位比你剛看到的時候要稍微複雜一點。對於定位來講，有一些東西會絆倒新手，因此在它成爲你的慣用技巧前你須要掌握它們。

一旦你更深刻地瞭解了它是怎麼運做的，你就可以作出一些更棒的事情來。

CSS盒模型和定位的類型

爲了搞清楚定位首先你得了解CSS盒模型。在上一句中的連接是我寫在InstantShift 中的一篇關於盒模型的文章。我在那篇文章作了詳細的講解並會在這篇文章中作一個快速的總結。

在CSS中，每個元素都由一個矩形盒子所包含。每個盒子都會具備一個內容區，內容區被一個內邊距所包裹，內邊距外是盒子的邊框，而且在邊框以外會有一個外邊距用於與其餘盒子分隔開來。這些你能夠從下面這張圖片看到。

定位模式規定了一個盒子在整體的佈局上應該處於什麼位置以及對周圍的盒子會有什麼影響。定位模式包括了常規文檔流，浮動，和幾種類型的 position 定位的元素。

CSS position 屬性能夠取5種值：

• position: absolute
• position: relative
• position: fixed
• position: static
• position: inherit

我會在下面對前三個值進行詳細的闡述並簡單地講解一下最後兩個值。

static 是 position 默認的屬性值。任何應用了 position:static 的元素都處於常規文檔流中。它處於什麼位置以及它如何影響周邊的元素都是由盒模型所決定的。

一個 static 定位的元素會忽略全部 top，right，bottom，left 以及 z-index 屬性所聲明的值。爲了讓你的元素能使用任何的這些屬性，你須要先爲它的 position 屬性應用這三個值的其中之一： absolute，relative，fixed

position 值爲 inherit 的元素和其餘全部屬性的繼承值同樣，元素只是簡單地應用了與父元素同樣的 position 值。

絕對定位（Absolute Positioning）

絕對定位的元素會徹底地從常規文檔流中脫離。對於包圍它的元素而言，它會將該絕對定位元素視爲不存在。就好像 display 屬性被設爲 none 同樣。若是你想要保持它所佔有的位置而不被其餘元素所填充，那麼你須要使用其餘的定位方式。

你能夠經過 top, right, bottom, 和 left 四個屬性來設置絕對定位元素的位置。但你一般只會設置它們其中的兩個，top 或者 bottom，以及 left 或者 right。默認地它們的值都爲 auto。

弄明白絕對定位的關鍵是知道它的起點在哪裏。若是 top 被設置爲20px那麼你要知道這20px是從哪裏開始計算的。

一個絕對定位的元素的起點位置是相對於它的第一個 position 值不爲 static 的父元素而言的。若是在它的父元素鏈上沒有知足條件的父元素，那麼絕對定位元素則會相對於文檔窗口來進行定位。哈！

關於「相對」這個概念你或許有點迷惑，尤爲是還有一個叫相對定位的東西，這是咱們尚未講到的。

當你在一個元素的樣式上設置 position:absolute 意味着須要考慮父元素，而且若是父元素的 position 值不爲 static ，那麼絕對定位元素的起點爲父元素的左上角位置。

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

相對定位（Relative Positioning）

相對定位的元素也是根據 top, right, bottom, 和 left 四個屬性來決定本身的位置的。但只是相對於它們原來所處於的位置進行移動。在某種意義上來講，爲元素設置相對定位和爲元素添加 margin 有點類似，但也有一個重要的區別。區別就是在圍繞在相對定位元素附近的元素會忽略相對定位元素的移動。

咱們能夠把它看作是一張圖片的重像從真實的圖片的位置開始進行了一點移動。它原始圖片所佔據的位置仍然保留，但咱們已經無法再看到它，只能看到它的重像。這樣就讓元素之間能夠進行位置的重疊，由於相對定位元素可以移動到其餘元素所佔據的空間中。

相對定位元素離開了正常文檔流，但仍然影響着圍繞着它的元素。那些元素表現地就好像這個相對定位元素仍然在正常文檔流當中。

咱們無需再追問這個相對的位置是在哪裏。由於這個相對位置很顯然是正常的文檔流。相對定位有點兒像爲元素添加了 margin ，對相鄰元素來講卻像是什麼都沒發生過。但實際上並無增長任何的 margin 。

固定定位（Fixed Positioning）

固定定位的行爲相似於絕對定位，但也有一些不一樣的地方。

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

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

在某種意義上說固定定位元素有點兒相似固定的背景圖片，只不過它的外層容器塊老是瀏覽器窗口罷了。若是你在 body 中設置一個背景圖片那麼它與一個固定定位的元素的行爲時很是像的，只不過在位置上的精度會略少一些。

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

打破了平面的 Z-Index

這個頁面是一個二維平面。它具備寬度和高度。咱們活在一個用 z-index 做爲其深度的三維的世界當中。這個額外的維度可以穿越一個平面。

 

由上圖可知，高的 z-index 位於低的 z-index 的上面並朝頁面的上方運動。相反地，一個低的 z-index 在高的 z-index 的下面並朝頁面下方運動。

沒有的 z-index 的話，定位元素會有點兒麻煩。由於 z-index 能讓一個定位元素位於另外一個元素的上方或者下方，這或許能讓你作出點創造性的東西。全部的元素的默認的 z-index 值都爲0，而且咱們能夠對 z-index 使用負值。

z-index 實際上比我在這裏描述的要更加地複雜，但細節寫在了另外一篇文章裏。如今只須要記住這個額外維度的基本概念以及它的堆疊順序，另外還要記住只有定位元素才能應用 z-index屬性。

定位的問題

對於定位元素來講由幾個比較常見的問題，都值得咱們好好了解。

1.你不能在同一個屬性當中應用定位屬性和浮動。由於對使用什麼樣的定位方案來講二者的指令時相沖突的。若是你把兩個屬性都添加到一個相同的元素上，那麼就指望在CSS中較後的那個屬性時你想要使用的吧。

2.Margin 不會在絕對元素上摺疊。假設你具備一個 margin-bottom 爲20px的段落。在段落後面是一個具備30px的 margin-top 的圖片。那麼段落和圖片之間的空間不會是50px（20px+30px）而是30px（30px > 20px）。這就是所謂的 margin-collapse，兩個 margin 會合並（摺疊）成一個 margin。

絕對定位元素不會像那樣進行 margin 的摺疊。這會使它們跟預期的不同。

3.IE在 Z-index 上有一些BUG。在IE 6中 select 元素老是處於堆疊層級的最上方而無論它的 z-index 和其餘元素的 z-index 是多少。

IE 6和IE 7在堆疊層級上又有另一個問題。IE 6由最外層的定位元素的層級來決定哪一組的元素處於層級的最上面，而不是每個單獨的元素自身的層級決定。

<div style="z-index: ">
   <p style="z-index: 1"></p>
</div>
<img style="z-index: " />

對上面這段結構，你會預料段落元素處於堆疊層級的最上方。由於它具備最大的 z-index 值。但在IE 6和IE 7中，圖片爲處於段落的上方。由於 img 具備比 div 更加高的 z-index 層級。所以它會位於全部 div 的子元素的上方。

總結

一個元素上所設置的位置屬性會根據其中的一種CSS定位模式來運做。你能夠爲定位元素設置 absolute, relative, fixed, static (默認), 和 inherit 中的其中一個值。

定位模式和CSS定位元素，定義了一個盒子在佈局中應該處於什麼位置以及圍繞它的元素會受到定位元素帶來的影響。

z-index 屬性只能被應用與定位元素上。它爲頁面增長了第三個維度並設置了元素的層級上的順序。

定位屬性看起來好像很好理解，但它的運做與它在表面所看到的有點兒不同。你可能會以爲的是相對定位更加相似絕對定位。當在作佈局設計的時候你一般會想使用浮動並在指定的元素上應用定位來打破布局。

譯者手語：整個翻譯依照原文線路進行，並在翻譯過程略加了我的對技術的理解。若是翻譯有不對之處，還煩請同行朋友指點。謝謝！

英文原文：http://www.vanseodesign.com/css/css-positioning/　翻譯 白牙