一直對這個屬性不懂，終於找到一個地址，看懂了說明。原地址https://blog.csdn.net/fen584521/article/details/52123368
position 定位屬性，是CSS中非常重要的屬性。除了文檔流布局，就是定位布局了。
其參數主要有以下：
absolute
生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。
元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。
fixed
生成絕對定位的元素，相對於瀏覽器窗口進行定位。
元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。
relative
生成相對定位的元素，相對於其正常位置進行定位。
因此，”left:20” 會向元素的 LEFT 位置添加 20 像素。
static
默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
inherit
規定應該從父元素繼承 position 屬性的值。
static 默認值，就是沒有定位，那就沒必要多解釋了。inherit 繼承父元素，基本上這個參數用得相當少，所以也不做過多的解釋。
文檔流布局的概念
什么是文檔流布局？我百度了一下相對嚴謹的解釋:
將窗體自上而下分成一行行， 並在每行中按從左至右的順序排放元素，即為文檔流。
每個非浮動塊級元素都獨占一行， 浮動元素則按規定浮在行的一端。 若當前行容不下， 則另起新行再浮動。
內聯元素也不會獨占一行。 幾乎所有元素(包括塊級，內聯和列表元素）均可生成子行， 用於擺放子元素。
有三種情況將使得元素脫離文檔流而存在，分別是 浮動，絕對定位， 固定定位。 但是在IE6中浮動元素也存在於文檔流中。
關於浮動會脫離文檔流，這里我就不解釋了。因為我們一般會大力避免這種問題，而使用清除浮動的方法。上面引用的文字中，絕對定位 是指position:absolute ，而 固定定位 是指 position:fixed。
如上圖所示，這就是正常的文檔流布局。一個一個挨着的，到頭了，另起一行，接着排布。
理解文檔流布局，是理解本文的基礎，文檔流布局也是css布局最基礎的知識。這里就不詳細贅述了。
position:relative 相對定位
什么是相對定位？相對什么定位？這是重要的問題。我的回答是——相對自己文檔流中的原始位置定位。它的特點是——不會脫離文檔流。
也就是說，使用position:relative定位，其元素依舊在文檔流中，他的位置可以使用 left、right、top、bottom、z-index等定位參數，但是，他的存在，還是會影響文檔中緊跟在他周圍的元素的。
無論多少文字描述，可能都無法讓你理解。下面，我們看一下實際效果。
如上圖的演示，我給test3加上了position:relative定位效果。代碼如下：
position: relative;left: -20px;top: 20px;1
大家可以清晰的從圖上看出來，test3根據CSS參數left: -20px;top: 20px;發生了位移。
但是！但是！但是！重要的事情說三遍，它的唯一並沒有對周圍的元素有任何的影響！！它依然存在於文檔流中。它的位移是根據它在文檔流中的原始位置發生的！！這一點非常非常重要。
通過上面的圖片和闡釋，我相信大家都對position:relative參數有了深刻的理解了。但這沒完。下面我們還有關於它的內容。
position:fixed 相對瀏覽器定位
相比而言，這個參數是最好理解的。它相對於瀏覽器的窗口進行定位。同時——它會脫離文檔流
好，還是上圖片。
代碼如下：
position: fixed;right:20px;top: 20px;1
這是初始狀態，我們可以看到它的特點：
1. 它脫離了文檔流，原來文檔流中不存在它的位置，test4好像test3不存在一樣的緊貼在了test2的后面。
2. 它的right:20px;top: 20px;參數是相對瀏覽器窗口定位的。
好，我們再來看一下，當頁面發生滾動的效果圖。
當頁面發生了滾動，我們可以看到，頁面的內容已經根據滾動條的位置發生了位移。但是我們的test3 依舊是在相對於瀏覽器的位置。
通過上面的圖文闡釋，我相信，大家對於 position:fixed 參數已經有了深刻的理解了。
其實position:fixed不難理解。
position:absolute 絕對定位
絕對定位是一個非常牛逼的屬性，牛逼到，你不知道會發生什么。注意，它的解釋是什么——“生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。”
也就是說，它可以相對於各種各樣的東西進行定位。除了 static 其他都可以！！！注意！注意！注意！ 是 除了 ！
也正是因為這一牛逼特性，導致很多人對此概念混亂。其實，這個一點也不混亂，我們可以將概念理順了，分成幾個情況來說。
PS:
position:absolute和position:fixed一樣是會脫離文檔流的。這里就不解釋脫離文檔流的問題，主要研究它的定位問題。
它的所有父元素的屬性都是 position:static
怎么理解這個標題？position:static 是所有html元素默認參數。就是說，這個元素的所有上級元素，你都沒有使用過定位方式。
我們通過如下代碼模擬一個場景：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div {font-size: 15px;color: #fff;} .test1 {width: 500px;height: 500px;background: #123;} .test2 {width: 400px;height: 400px;background: #234;} .test3 {width: 300px;height: 300px;background: #345;position: absolute;right: 20px;top: 20px;} </style></head><body> <div class="test1"> test1 <div class="test2"> test2 <div class="test3">test3</div> </div> </div></body></html>12345678910111213141516171819202122
如上，test3是test2的子元素，test1的孫元素。我們來看一下效果圖：
如上圖所示。我們可以看到，test3既沒有相對於父元素定位，也沒有相對於爺元素定位。它居然和position:fixed一樣！相對於瀏覽器定位了！！
！！！這是一個錯覺！！！
我們來看一下瀏覽器發生滾動之后的效果，如下圖所示：
如上圖所示，它並非是相對於瀏覽器定位，而是相對於文檔定位。
如果你有一點js基礎的話，那么應該很容易理解。$(document)和$(window)的差別（為了看得清楚，用了JQ寫法）
相對於文檔，就是相對於整個頁面來進行布局，而相對於窗口，則是相對於瀏覽器的可視區域進行定位，這二者有本質的區別的。
這種情況在實際應用中有，但是不多。下面，我們再來看其他情況。
它的父元素的屬性是 position:relative
上面，我們已經說過了，position:relative是相對於自身原始位置定位，其自身並沒有脫離文檔流。而它的子元素，使用position:absolute參數是什么效果呢？我們來做個試驗。下面是代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div {font-size: 15px;color: #fff;} .test1 {width: 500px;height: 500px;background: #123;} .test2 {width: 400px;height: 400px;background: #234;position: relative;left: 50px;top: 50px;} .test3 {width: 300px;height: 300px;background: #345;position: absolute;right: -20px;top: -20px;} </style></head><body> <div class="test1"> test1 <div class="test2"> test2 <div class="test3">test3</div> </div> </div></body></html>12345678910111213141516171819202122
我們給test2加上了position:relative屬性，並給出了偏移值，然后，再給test3使用絕對定位，使用了為負數的偏移值，我們來看一下效果圖，如下：
從上圖我們可以看到，test2如我們所願的，相對於自身的位置發生了偏移，而test3則相對於test2發生了偏移。
從這個試驗我們可以看出，當一個元素設置了position:absolute屬性之后，而它的父元素的屬性為position:relative則，它不再是相對於文檔定位，而是相對於父元素定位。
這一點非常重要。最最重要的是，父元素設置為position:relative並不會脫離文檔流，也就是說——利用給父元素設置position:relative屬性，再將子元素設置為position:absolute就可以在文檔流中實現需要的定位
這一點異常重要，也是非常常用的方法！（PS:基本上焦點圖等常見應用，都是使用了這種方式）
它的父元素的屬性是 position:fixed
上面，我們說了父元素為position:relative的情況，這種情況比較常見，那么它的父元素為 position:fixed 又是什么情況呢？如果你聰明的話，應該有了答案。我們來做一個試驗，來印證一下你的想法。代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div {font-size: 15px;color: #fff;} .test1 {width: 500px;height: 500px;background: #123;} .test2 {width: 400px;height: 400px;background: #234;position: fixed;right: 20px;top: 20px;} .test3 {width: 300px;height: 300px;background: #345;position: absolute;left: -40px;top: 40px;} </style></head><body> <div class="test1"> test1 <div class="test2"> test2 <div class="test3">test3</div> </div> </div></body></html>12345678910111213141516171819202122
好，我們可以看到我給test2加上了position: fixed;right: 20px;top: 20px; 它會相對於瀏覽器窗口定位，而test3作為test2的子元素，我們加上了position: absolute;left: -40px;top: 40px;那么，根據我們的想象，它應該相對於test2作出偏移。那么是不是這個情況呢？我們來看一下效果圖：
如上圖所示，看到了具體的效果了吧！是不是和你想象的是一樣的呢？
它的父元素的屬性是 position:absolute
好，我們來看一下，如果position:absolute嵌套position:absolute元素將會出現什么情況呢？
寫了這么多，其實你應該有了一定的預見性了吧？好，我們來做試驗，代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div {font-size: 15px;color: #fff;} .test1 {width: 500px;height: 500px;background: #123;} .test2 {width: 400px;height: 400px;background: #234;position: absolute;right: 20px;top: 20px;} .test3 {width: 300px;height: 300px;background: #345;position: absolute;right: 20px;top: 20px;} </style></head><body> <div class="test1"> test1 <div class="test2"> test2 <div class="test3">test3</div> </div> </div></body></html>12345678910111213141516171819202122
如上所示，test2我們使用了position: absolute;right: 20px;top: 20px;參數，那么，它會相對於文檔作出設定的偏移值。而我們給test3使用了同樣的css樣式。如果test3也是相對於文檔定位的話，那么它和test2應該是重疊的。
但是，我們根據上面的解釋，test3應該相對於test2定位才對，那么是不是呢？我們看效果圖：
650) this.width=650;" src="http://ww4.sinaimg.cn/large/459e195ajw1eyedktnqnoj20la0i6dgw.jpg" alt="position:absolute效果5" title="" style="border:none;height:auto;" />
如上圖所示，果然，test2相對於文檔偏移，而test3相對於test2偏移。
position 以及參數總結
-
position: relative;不會脫離文檔流，position: fixed;position: absolute;會脫離文檔流 -
position: relative;相對於自己在文檔流中的初始位置偏移定位。 -
position: fixed;相對於瀏覽器窗口定位。 -
position: absolute;是相對於父級非position:static瀏覽器定位。-
如果沒有任何一個父級元素是非
position:static屬性，則會相對於文檔定位。 -
這里它的父級元素是包含爺爺級元素、祖爺爺級元素、祖宗十八代級元素的。任意一級都可以。
-
如果它的父級元素和爺爺級元素都是非
position:static屬性，則，它會選擇距離最近的父元素。
-