CSS 詳細解讀定位屬性 position 以及參數Css 詳細解讀定位屬性 position 以及參數

position 定位屬性，是CSS中非常重要的屬性。除了文檔流布局，就是定位布局了。本來我對這個問題沒有放在心上，畢竟寫了這麼多年的css，對position的各類使用是爛熟于心的。但是今天突然發現，居然很多人都不清楚position參數。是以，特地寫這篇博文，詳細解讀一下position 以及參數。

其參數主要有以下：

absolute 

生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。 

元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。 

fixed 

生成絕對定位的元素，相對于浏覽器視窗進行定位。 

relative 

生成相對定位的元素，相對于其正常位置進行定位。 

是以，”left:20” 會向元素的 LEFT 位置添加 20 像素。 

static 

預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 

inherit 

規定應該從父元素繼承 position 屬性的值。

<code>static</code> 預設值，就是沒有定位，那就沒必要多解釋了。<code>inherit</code> 繼承父元素，基本上這個參數用得相當少，是以也不做過多的解釋。

什麼是文檔流布局？我百度了一下相對嚴謹的解釋:

将窗體自上而下分成一行行， 并在每行中按從左至右的順序排放元素，即為文檔流。   每個非浮動塊級元素都獨占一行， 浮動元素則按規定浮在行的一端。 若目前行容不下， 則另起新行再浮動。  内聯元素也不會獨占一行。 幾乎所有元素(包括塊級，内聯和清單元素）均可生成子行， 用于擺放子元素。   有三種情況将使得元素脫離文檔流而存在，分别是 浮動，絕對定位， 固定定位。 但是在IE6中浮動元素也存在于文檔流中。

關于浮動會脫離文檔流，這裡我就不解釋了。因為我們一般會大力避免這種問題，而使用清除浮動的方法。上面引用的文字中，絕對定位 是指<code>position:absolute</code> ，而 固定定位 是指 <code>position:fixed</code>。

如上圖所示，這就是正常的文檔流布局。一個一個挨着的，到頭了，另起一行，接着排布。

了解文檔流布局，是了解本文的基礎，文檔流布局也是css布局最基礎的知識。這裡就不詳細贅述了。

什麼是相對定位？相對什麼定位？這是重要的問題。我的回答是——相對自己文檔流中的原始位置定位。它的特點是——不會脫離文檔流。

也就是說，使用<code>position:relative</code>定位，其元素依舊在文檔流中，他的位置可以使用 <code>left</code>、<code>right</code>、<code>top</code>、<code>bottom</code>、<code>z-index</code>等定位參數，但是，他的存在，還是會影響文檔中緊跟在他周圍的元素的。

無論多少文字描述，可能都無法讓你了解。下面，我們看一下實際效果。

如上圖的示範，我給test3加上了<code>position:relative</code>定位效果。代碼如下：

大家可以清晰的從圖上看出來，test3根據CSS參數<code>left: -20px;top: 20px;</code>發生了位移。

但是！但是！但是！重要的事情說三遍，它的唯一并沒有對周圍的元素有任何的影響！！它依然存在于文檔流中。它的位移是根據它在文檔流中的原始位置發生的！！這一點非常非常重要。

通過上面的圖檔和闡釋，我相信大家都對<code>position:relative</code>參數有了深刻的了解了。但這沒完。下面我們還有關于它的内容。

相比而言，這個參數是最好了解的。它相對于浏覽器的視窗進行定位。同時——它會脫離文檔流

好，還是上圖檔。

代碼如下：

這是初始狀态，我們可以看到它的特點： 

1. 它脫離了文檔流，原來文檔流中不存在它的位置，test4好像test3不存在一樣的緊貼在了test2的後面。 

2. 它的<code>right:20px;top: 20px;</code>參數是相對浏覽器視窗定位的。

好，我們再來看一下，當頁面發生滾動的效果圖。

當頁面發生了滾動，我們可以看到，頁面的内容已經根據滾動條的位置發生了位移。但是我們的test3 依舊是在相對于浏覽器的位置。

通過上面的圖文闡釋，我相信，大家對于 <code>position:fixed</code> 參數已經有了深刻的了解了。

其實<code>position:fixed</code>不難了解。

絕對定位是一個非常牛逼的屬性，牛逼到，你不知道會發生什麼。注意，它的解釋是什麼——“生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。”

也就是說，它可以相對于各種各樣的東西進行定位。除了 <code>static</code> 其他都可以！！！注意！注意！注意！ 是 除了 ！

也正是因為這一牛逼特性，導緻很多人對此概念混亂。其實，這個一點也不混亂，我們可以将概念理順了，分成幾個情況來說。

PS:<code>position:absolute</code>和<code>position:fixed</code>一樣是會脫離文檔流的。這裡就不解釋脫離文檔流的問題，主要研究它的定位問題。

怎麼了解這個标題？<code>position:static</code> 是所有html元素預設參數。就是說，這個元素的所有上級元素，你都沒有使用過定位方式。

我們通過如下代碼模拟一個場景：

如上，test3是test2的子元素，test1的孫元素。我們來看一下效果圖：

如上圖所示。我們可以看到，test3既沒有相對于父元素定位，也沒有相對于爺元素定位。它居然和<code>position:fixed</code>一樣！相對于浏覽器定位了！！

！！！這是一個錯覺！！！

我們來看一下浏覽器發生滾動之後的效果，如下圖所示：

如上圖所示，它并非是相對于浏覽器定位，而是相對于文檔定位。

如果你有一點js基礎的話，那麼應該很容易了解。<code>$(document)</code>和<code>$(window)</code>的差别（為了看得清楚，用了JQ寫法）

相對于文檔，就是相對于整個頁面來進行布局，而相對于視窗，則是相對于浏覽器的可視區域進行定位，這二者有本質的差別的。

這種情況在實際應用中有，但是不多。下面，我們再來看其他情況。

上面，我們已經說過了，<code>position:relative</code>是相對于自身原始位置定位，其自身并沒有脫離文檔流。而它的子元素，使用<code>position:absolute</code>參數是什麼效果呢？我們來做個試驗。下面是代碼：

我們給test2加上了<code>position:relative</code>屬性，并給出了偏移值，然後，再給test3使用絕對定位，使用了為負數的偏移值，我們來看一下效果圖，如下：

從上圖我們可以看到，test2如我們所願的，相對于自身的位置發生了偏移，而test3則相對于test2發生了偏移。

從這個試驗我們可以看出，當一個元素設定了<code>position:absolute</code>屬性之後，而它的父元素的屬性為<code>position:relative</code>則，它不再是相對于文檔定位，而是相對于父元素定位。

這一點非常重要。最最重要的是，父元素設定為<code>position:relative</code>并不會脫離文檔流，也就是說——利用給父元素設定<code>position:relative</code>屬性，再将子元素設定為<code>position:absolute</code>就可以在文檔流中實作需要的定位

這一點異常重要，也是非常常用的方法！（PS:基本上焦點圖等常見應用，都是使用了這種方式）

上面，我們說了父元素為<code>position:relative</code>的情況，這種情況比較常見，那麼它的父元素為 <code>position:fixed</code> 又是什麼情況呢？如果你聰明的話，應該有了答案。我們來做一個試驗，來印證一下你的想法。代碼如下：

好，我們可以看到我給test2加上了<code>position: fixed;right: 20px;top: 20px;</code> 它會相對于浏覽器視窗定位，而test3作為test2的子元素，我們加上了<code>position: absolute;left: -40px;top: 40px;</code>那麼，根據我們的想象，它應該相對于test2作出偏移。那麼是不是這個情況呢？我們來看一下效果圖：

如上圖所示，看到了具體的效果了吧！是不是和你想象的是一樣的呢？

好，我們來看一下，如果<code>position:absolute</code>嵌套<code>position:absolute</code>元素将會出現什麼情況呢？

寫了這麼多，其實你應該有了一定的預見性了吧？好，我們來做試驗，代碼如下：

如上所示，test2我們使用了<code>position: absolute;right: 20px;top: 20px;</code>參數，那麼，它會相對于文檔作出設定的偏移值。而我們給test3使用了同樣的css樣式。如果test3也是相對于文檔定位的話，那麼它和test2應該是重疊的。

但是，我們根據上面的解釋，test3應該相對于test2定位才對，那麼是不是呢？我們看效果圖：

如上圖所示，果然，test2相對于文檔偏移，而test3相對于test2偏移。

<code>position: relative;</code>不會脫離文檔流，<code>position: fixed;position: absolute;</code>會脫離文檔流

<code>position: relative;</code> 相對于自己在文檔流中的初始位置偏移定位。

<code>position: fixed;</code> 相對于浏覽器視窗定位。

<code>position: absolute;</code> 是相對于父級非<code>position:static</code> 浏覽器定位。 

如果沒有任何一個父級元素是非<code>position:static</code>屬性，則會相對于文檔定位。

這裡它的父級元素是包含爺爺級元素、祖爺爺級元素、祖宗十八代級元素的。任意一級都可以。

如果它的父級元素和爺爺級元素都是非<code>position:static</code> 屬性，則，它會選擇距離最近的父元素。

本文為 FungLeo by FengCMS 原創，轉載，請無比保留此申明！