CSS 詳細解讀定位屬性 position 以及引數
Css 詳細解讀定位屬性 position 以及引數
position 定位屬性，是CSS中非常重要的屬性。除了文件流佈局，就是定位佈局了。本來我對這個問題沒有放在心上，畢竟寫了這麼多年的css，對position的各類使用是爛熟於心的。但是今天突然發現，居然很多人都不清楚position引數。因此，特地寫這篇博文，詳細解讀一下position 以及引數。
基礎資料
其引數主要有以下：
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定位才對，那麼是不是呢？我們看效果圖：
如上圖所示，果然，test2相對於文件偏移，而test3相對於test2偏移。
position 以及引數總結
position: relative;不會脫離文件流，position: fixed;position: absolute;會脫離文件流position: relative;相對於自己在文件流中的初始位置偏移定位。position: fixed;相對於瀏覽器視窗定位。position: absolute;是相對於父級非position:static瀏覽器定位。如果沒有任何一個父級元素是非
position:static屬性，則會相對於文件定位。這裡它的父級元素是包含爺爺級元素、祖爺爺級元素、祖宗十八代級元素的。任意一級都可以。
如果它的父級元素和爺爺級元素都是非
position:static屬性，則，它會選擇距離最近的父元素。
本文為 FungLeo by FengCMS 原創，轉載，請無比保留此申明！