摘要：有三種情況將使得元素脫離文檔流而存在，分別是浮動，絕對定位，固定定位。我的回答是相對自己文檔流中的原始位置定位。這里就不解釋脫離文檔流的問題，主要研究它的定位問題。

CSS定位是CSS布局只能夠重要的一環。本篇文章帶你解讀定位屬性，可以讓你更加深入的理解定位帶來的一些特性，熟練使用CSS布局。

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

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

（1）相對定位：相對定位的元素是在文檔中的正常位置偏移給定的值，但是不影響其他元素的偏移。相對定位的元素并未脫離文檔流。
（2）絕對定位：絕對定位的元素則脫離了文檔流。在布置文檔流中其它元素時，絕對定位元素不占據空間。絕對定位元素相對于最近的非static祖先元素定位。當這樣的祖先元素不存在時，則相對于根級容器定位。
（3）固定定位：固定定位與絕對定位相似，也脫離了文檔流，但元素的包含塊為viewport視口。該定位方式常用于創建在滾動屏幕時仍固定在相同位置的元素。
（4）默認定位：文檔中按照正常順序出現的定位。

position:relative

什么是相對定位？相對什么定位？這是重要的問題。我的回答是——相對自己文檔流中的原始位置定位。它的特點是——不會脫離文檔流。
也就是說，使用position:relative定位，其元素依舊在文檔流中，他的位置可以使用left、right、top、bottom、z-index等定位參數，但是，它的存在，還是會影響文檔中緊跟在他周圍的元素的。
下面，我們看一下實際效果。

如上圖的演示，我給test3加上了position:relative定位效果。
代碼如下：

position: relative;
left: -20px;
top: 20px;

可以清晰的從圖上看出來，test3根據CSS參數left: -20px;top: 20px;發生了位移。
但是！但是！但是！重要的事情說三遍，它的位移并沒有對周圍的元素有任何的影響！！它依然存在于文檔流中。它的位移是根據它在文檔流中的原始位置發生的！！這一點非常非常重要。

position:fixed

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

代碼如下：

position: fixed;
right:20px;
top: 20px;

這是初始狀態，我們可以看到它的特點：
它脫離了文檔流，原來文檔流中不存在它的位置，test4好像test3不存在一樣的緊貼在了test2的后面。它的right:20px;top: 20px;參數是相對瀏覽器窗口定位的。
好，我們再來看一下，當頁面發生滾動的效果圖：

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

position:absolute
絕對定位是一個非常牛逼的屬性，牛逼到，你不知道會發生什么。注意，它的解釋是什么——“生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。”
也就是說，它可以相對于各種各樣的東西進行定位。除了?static?其他都可以?。?！注意！注意！注意！?是除了?！
也正是因為這一牛逼特性，導致很多人對此概念混亂。其實，這個一點也不混亂，我們可以將概念理順了，分成幾個情況來說。

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

(1)它的所有父元素的屬性都是?position:static
怎么理解這個標題？position:static?是所有html元素默認參數。就是說，這個元素的所有上級元素，你都沒有使用過定位方式。
我們通過如下代碼模擬一個場景：

    
    
    


    

        test1
        

            test2
            
test3
        
    

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

如上圖所示。我們可以看到，test3既沒有相對于父元素定位，也沒有相對于爺元素定位。它居然和position:fixed一樣！相對于瀏覽器定位了??！
?。。∵@是一個錯覺?。。?br>我們來看一下瀏覽器發生滾動之后的效果，如下圖所示：

如上圖所示，它并非是相對于瀏覽器定位，而是相對于文檔定位。
如果你有一點js基礎的話，那么應該很容易理解。$(document)和$(window)的差別（為了看得清楚，用了JQ寫法）
相對于文檔，就是相對于整個頁面來進行布局，而相對于窗口，則是相對于瀏覽器的可視區域進行定位，這二者有本質的區別的。
這種情況在實際應用中有，但是不多。

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

    
    
    


    

        test1
        

            test2
            
test3
        
    

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

從上圖我們可以看到，test2如我們所愿的，相對于自身的位置發生了偏移，而test3則相對于test2發生了偏移。
從這個試驗我們可以看出，當一個元素設置了position:absolute屬性之后，而它的父元素的屬性為position:relative則，它不再是相對于文檔定位，而是相對于父元素定位。
這一點非常重要。最最重要的是--父元素設置為position:relative并不會脫離文檔流，也就是說——利用給父元素設置position:relative屬性，再將子元素設置為position:absolute就可以在文檔流中實現需要的定位。這一點異常重要，也是非常常用的方法！（PS:基本上焦點圖等常見應用，都是使用了這種方式）。

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

    
    
    


    

        test1
        

            test2
            
test3
        
    

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

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

(4)它的父元素的屬性是?position:absolute
好，我們來看一下，如果position:absolute嵌套position:absolute元素將會出現什么情況呢？
寫了這么多，其實你應該有了一定的預見性了吧？好，我們來做試驗，代碼如下：

    
    
    


    

        test1
        

            test2
            
test3
        
    

如上所示，test2我們使用了position: absolute;right: 20px;top: 20px;參數，那么，它會相對于文檔作出設定的偏移值。而我們給test3使用了同樣的css樣式。如果test3也是相對于文檔定位的話，那么它和test2應該是重疊的。
但是，我們根據上面的解釋，test3應該相對于test2定位才對，那么是不是呢？我們看效果

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

position: relative;不會脫離文檔流，position: fixed;position: absolute;會脫離文檔流
position: relative;?相對于自己在文檔流中的初始位置偏移定位。
position: fixed;?相對于瀏覽器窗口定位。
position: absolute;?是相對于父級非position:static?瀏覽器定位。
如果沒有任何一個父級元素是非position:static屬性，則會相對于文檔定位。
這里它的父級元素是包含爺爺級元素、祖爺爺級元素、祖宗十八代級元素的。任意一級都可以。
如果它的父級元素和爺爺級元素都是非position:static?屬性，則，它會選擇距離最近的父元素。

參考資料：
1.MDN：https://developer.mozilla.org...

相關文章推薦：CSS進階指南