CSS 详细解读定位属性 position 以及参数
Css 詳細解讀定位屬性 position 以及參數
position 定位屬性，是CSS中非常重要的屬性。除了文檔流布局，就是定位布局了。本來我對這個問題沒有放在心上，畢竟寫了這么多年的css，對position的各類使用是爛熟于心的。但是今天突然發現，居然很多人都不清楚position參數。因此，特地寫這篇博文，詳細解讀一下position 以及參數。
基礎資料
首先，我們可以到?W3SCHOOL 關于 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?原創，轉載，請無比保留此申明！
總結
以上是生活随笔為你收集整理的CSS 详细解读定位属性 position 以及参数的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ASP.NET MVC学前篇之Ninje
- 下一篇： halcon算子翻译——dev_set_