css知多少（11）——position

1. 引言

　　本文將用一篇文章介紹position（定位），在學習position以前，咱們應該去思考一個問題：什麼狀況下咱們須要定位？若是沒有定位將沒法知足咱們怎樣的需求？咱們要知道，被人類創造出來的每個知識，都有它的用途，都要解決一些以前遇到的問題。

　　若是沒有定位，咱們作出來的網頁將會是循序漸進的自上而下、自左而右的平鋪在瀏覽器上，外加經過margin和padding調整一下間距，還有就是經過float來浮動某些元素。作一些簡單的網頁這樣就夠了，例如N年以前的yahoo，雖然如今看來很low。

　　

　　可是有些狀況下，這種循序漸進的網頁排版知足不了咱們的要求，咱們須要某些元素跑出來，懸浮在網頁上面，並且須要給它指定一個位置。這時候咱們就須要用到了position，並且是非用不可。以下圖：

　　

2. relative

　　查資料可知道，position一共有四個可選屬性：static/relative/absolute/fixed。其中static（靜態定位）是默認值，即全部的元素若是不設置其餘的position值，它的position值就是static，有它跟沒有它同樣。就很少介紹了。

　　相對定位relative能夠用一個例子很輕鬆的演示出來。例如咱們寫4個<p>，出來的樣子你們不用看也能知道。

      

　　而後咱們在第三個<p>上面，加上position:relative而且設置left和top值，看這個<p>有什麼變化。

　　

　　上圖中，你們應該要識別出兩個信息（相信大部分人會忽略第二個信息）

1. 第三個<p>發生了位置變化，分別向右向下移動了10px；
2. 其餘的三個<p>位置沒有發生變化，這一點也很重要。

　　所以，relative會致使自身位置的相對變化，而不會影響其餘元素的位置、大小的變化。這是relative的要點之一。還有第二個要點，就是relative產生一個新的定位上下文，下文有關於定位上下文的詳細介紹，這裏能夠先經過一個例子來展現一下區別：

　　

　　注意看這兩圖的區別，下文將有解釋。

3. absolute

　　說道absolute，推薦你們去看一個視頻教程，講師對absolute講的很是透徹，本文的一些內容也是參考了這篇教程，好東西你們一塊兒分享嗎！

　　話歸正傳，我們仍是拿以前那個例子說事兒，先寫一個基本的頁面——4個<p>

　　

　　而後，咱們把第三個<p>改成absolute，看看會發生什麼變化。

　　

　　從上面的結果中，咱們能看出幾點信息：

1. absolute元素脫離了文檔結構。和relative不一樣，其餘三個元素的位置從新排列了。只要元素會脫離文檔結構，它就會產生破壞性，致使父元素坍塌。（此時你應該能馬上想起來，float元素也會脫離文檔結構）
2. absolute元素具備「包裹性」。以前<p>的寬度是撐滿整個屏幕的，而此時<p>的寬度恰好是內容的寬度。
3. absolute元素具備「跟隨性」。雖然absolute元素脫離了文檔結構，可是它的位置並無發生變化，仍是老老實實的呆在它本來的位置，由於咱們此時沒有設置top、left的值。
4. absolute元素會懸浮在頁面上方，會遮擋住下方的頁面內容。

　　最後，經過給absolute元素設置top、left值，可自定義其內容，這個都是平時比較經常使用的了。這裏須要注意的是，設置了top、left值時，元素是相對於最近的定位上下文來定位的，而不是相對於瀏覽器定位。下文立刻會講定位上下文。

　　可是有時候設置top、left值並非定位的最佳解決方案。例如想要元素A緊跟在元素B的上方，可經過設置元素B爲absolute，而後調整B的margin值來肯定，這樣更有效率。以下圖：

　　

　　以上提到的信息，若是展開來講，內容很是多，並且用文本也很差描述，仍是推薦你們去看慕課網的那篇視頻教程，講的頗有意思。

　　

　　最後，再提幾個小知識點。

1. 設置absolute會使得inline元素被「塊」化，這在上一節將display時已經說過；
2. 設置absolute會使得元素已有的float失效。不過float和absolute同時使用的狀況很少；
3. 上文提到了absolute會使元素懸浮在頁面之上，若是有多個懸浮元素，層級如何肯定？答案是「後來者居上」

4. fixed

　　其實fixed和absolute是同樣的，惟一的區別在於：absolute元素是根據最近的定位上下文肯定位置，而fixed永遠根據瀏覽器肯定位置。

　　上文不少次提到了「定位上下文」，那麼它究竟是一個什麼東東？答案立刻揭曉。

5. 定位上下文

　　5.1 relative的定位

　　relative元素的定位永遠是相對於元素自身位置的，和其餘元素不要緊，也不會影響其餘元素。

　　

　　5.2 fixed的定位

　　fixed元素的定位永遠是相對於瀏覽器邊界的，和其餘元素沒有關係。可是它具備破壞性，會致使其餘元素位置的變化。

　　

　　5.3 absolute的定位

　　absolute的定位相對於前二者要複雜許多。若是爲absolute設置了top、left，瀏覽器會根據什麼去肯定它的縱向和橫向的偏移量呢？答案是瀏覽器會遞歸查找該元素的全部父元素，若是找到一個設置了position:relative/absolute/fixed的元素，就以該元素爲基準定位，若是沒找到，就以瀏覽器邊界定位。以下兩個圖所示：

　　

　　

　　上圖中的「某一層祖先元素」就是該absolute元素的定位上下文。講到這裏，咱們上文中的那個圖，你們能看明白了吧？還有不明白的能夠留言給我。

　　

 

6. 總結

　　我感受position這篇文章是這一系列中最難寫的文章，它的知識點比較多，並且很是難理解，所以position也是css的一個重點知識，不懂position的前端開發人員要抓緊惡補一下。

　　寫了這麼多，感受仍是寫的不是很全面，或者不是很系統，很但願你們把本身的意見反饋給我。這個系列博客算是這個教程的初版，我計劃後期抽時間會錄製一個視頻版，到時候但願會更加全面系統一些。

---------------------------------------------------------------

本系列的目錄頁面：http://www.cnblogs.com/wangfupeng1988/p/4325007.html

-------------------------------------------------------------------------------------------------------------

學習做者教程：《前端JS高級面試》《前端JS基礎面試題》《React.js模擬大衆點評webapp》《zepto設計與源碼分析》《json2.js源碼解讀》

也歡迎關注個人開源項目——wangEditor，簡潔易用的web富文本編輯器

-------------------------------------------------------------------------------------------------------------