CSS position屬性有什麼用

position是CSS中非常重要的一個屬性，通過position屬性，我們可以讓元素相對於其正常位置，父元素或者瀏覽器視窗進行位移。postion也是初學者容易搞不清楚狀況的一個屬性，本文將從最基礎的知識講起，談談關於positon屬性的一些理論與應用。

基礎知識

postion屬性我們成為定位，它有4個不同類型的定位，這些類型會影響元素的產生方式，下面我們詳細說明position屬性。

position四種類型

（1）static
static是position屬性的預設值，預設情況下，區塊層級元素和行內元素按照各自的特性進行顯示
（2）relative
relative翻譯成中文稱相對定位，設定了這個屬性後，元素會根據top，left，bottom，right進行位移，關鍵點是它原本的空間仍然保留。我們看下面例子：
HTML代碼

<div class="relative"></div><div></div>

CSS代碼

div { background: #0094ff; width: 250px; height: 100px; }         .relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; }

relative效果

在這個例子中，p.relative相對定位，並且left設定為20px，left設定為50px，其相對於父元素進行位移，並且原本的空間也佔據著，下面的元素並不會頂替上去。

（3）absolute
元素設定成absolute後會脫離文檔流，並且不佔有原本的空間，後面的元素會頂替上去，而且不論元素是行內元素還是區塊層級元素，都會產生一個塊級框，也就是例如行內元素span設定了absolute後就可以設定height和width屬性了。看下面例子：
HTML代碼

<span class="absolute"></span><div></div>

CSS代碼

div { background: #0094ff; width: 250px; height: 100px; }       .absolute { background: #ff6a00; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; }

absolute效果

，span標籤被設定成絕對位置，就可以設定height和width屬性，而且不佔有原本的空間，後面的p元素會頂替上去。

（4）fixed
fixed的表現方式類似於absolute，但是相比於absolute相對於不確定的父元素進行位移，fixed就是相對於瀏覽器視窗進行位移

包含塊

在詳解CSS float屬性中我們提到包含塊這個概念。對於position屬性也有包含塊這個屬性，它要分幾種情況來討論：
1.根項目的包含塊，根項目一般是html元素，有些瀏覽器會使用body作為根項目，大多數瀏覽器，初始包含塊是一個視窗大小的矩形
2.非根項目的包含塊，如果該元素的position是relative或static，它的包含塊是最近的塊級框，表的儲存格或行內塊的內容邊界
我們舉例進行說明，
HTML代碼

<div>    我是父級元素的內容            <div class="relative">        相對定位元素    </div></div>

CSS代碼

div { background: #0094ff; width: 250px; height: 100px; }.relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; }

包含塊

這是相對定位元素的包含塊，為最近的塊級框，表的儲存格或行內塊的內容邊界，相對定位元素相對於其包含塊進行位移，我們可以簡單理解為相對於其原來的位置進行位移。

3.非根項目的包含塊，如果該元素的position是absolute，則包含塊為最近的position不是static的祖先元素。
簡單來說，它的包含塊會從父級元素一直向上尋找，找到第一個position不是static的元素為止。

位移屬性

前面的例子中已經涉及到位移屬性，它指的是元素相對於其包含塊的位移，我們稱其為位移屬性，分別是top，bottom，left，right，依次代表上下左右。他們的值可以是具體的數值，也可以是百分比。如果是百分比，top和bottom是相對於包含塊高度的百分比，left和right是相對於寬度的百分比。它們也可以設定負值，即有可能將元素移動到包含塊的外邊。

絕對位置

接下來我們瞭解一下絕對位置的詳細細節。

基本的絕對位置

一個元素被設定為絕對位置時，會脫離文檔流，然後相對其包含塊進行位移。
一般來說，我們會將一個元素設定為relative來作為absolute元素的包含塊，我們看看下面的例子：
HTML代碼

<div class="absolute">        相對於初始包含塊定位    </div>    <br />    <br />    <br />    <br />    <br />    <br />    <div class="relative">        <div class="absolute">            相對於最近relative祖先元素定位        </div>    </div>

CSS代碼

div { background: #0094ff; width: 250px; height: 100px; }        .relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; }        .absolute { background: #988c8c; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; }

基本的絕對位置

，有兩個絕對位置元素，第一個元素沒有position不是static的祖先元素，所以它的包含塊是body，根據body進行位移，
第二個絕對位置元素設定了一個relative的父元素，它根據父元素進行位移。

絕對位置的重疊問題

元素設定成絕對位置後會脫離文檔流，並且失去佔用的空間，而且如果位移的位置接近，會造成重疊問題。看看下面的例子：
HTML代碼

<div class="relative">    <div class="absolute">        相對於最近relative祖先元素定位1    </div>    <div class="absolute light">        相對於最近relative祖先元素定位2    </div></div>

CSS代碼

div { background: #0094ff; width: 250px; height: 100px; } .relative { background: #ff6a00; position: relative; width: 500px; height: 300px; top: 20px; left: 50px; } .absolute { background: #988c8c; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; } .light { background: #f3d6d6; top: 70px; left: 80px; }

絕對位置的重疊問題

我們可以看到，第二個絕對位置元素蓋住了第一個元素，那怎麼讓第一個元素蓋住第二個元素呢，這就要用到z-index屬性，這個屬性工作表示元素的疊加順序，預設情況下，z-index為0，數值越高的元素層級越高，就可以蓋住低於其層級的元素，我們設定第一個原色的z-index為10，結果如下

絕對位置的重疊問題

如果兩個元素的層級相同，則越後面的元素會覆蓋前面的元素，預設情況下，第二個元素就會蓋住第一個元素。

固定定位

fixed定位很簡單，類似與absoulte，但是它的包含塊就是瀏覽器視窗，相對來說簡單很多。常見的應用比如固定導航，回到頂部。在這裡不再贅述，大家可以尋找相關資料。

相對定位

relative定位的元素進行位移後，不會脫離文檔流，還有佔據原本的空間。除此之外，我們還要注意一個細節：如果元素設定了margin為負值之後發生重疊的情況下，相對定位的元素會覆蓋普通元素。我們看看下面的例子：
HTML代碼

<div class="no-relative">    未相對定位的元素</div><div class="minus-margin">    負margin元素</div>

CSS代碼

div { background: #0094ff; width: 250px; height: 100px; } .no-relative { background: #ff6a00; width: 200px; height: 100px; } .relative { background: #ff6a00; width: 200px; height: 100px; position: relative; } .minus-margin { margin-top: -30px; }

未相對定位時沒有覆蓋

預設情況下，兩個元素都是正常的元素，設定了負的margin屬性後，後面的元素會覆蓋前面的元素，我們修改第一個元素的class為relative，可以看到效果如下：

相對定位時覆蓋

添加了相對定位後，第一個元素就會覆蓋其他正常的元素了。

relative屬性最經常的一個應用應該是作為absolute元素的包含塊了，為了限制absolute元素的位移位置，常常設定其父元素為relative來作為其包含塊。

應用舉例

position的應用非常頻繁，下面我來說說常見的一些情境：

產品標籤

在電商網站中，我們常常可以看到產品的左上方或右上方有一些比如“新品”，“促銷”，“熱賣”等標籤，比如：

產品標籤

這個是怎麼實現的呢，我們來類比一下：
HTML代碼：

<div class="product">        我是產品        <span class="hot">            熱賣        </span>    </div>

CSS代碼：

.product { width: 150px; height: 150px; background: #0094ff; position: relative; }   .hot { position: absolute; right: 10px; top: 10px; width: 40px; height: 20px; background: #ff6a00; text-align: center; }

效果如下：

產品標籤

，右上方有一個標籤。原理很簡單，就是設定父元素相對定位，標籤元素絕對位置，然後相對於父元素位移到右上方。

自動完成框

自動完成框是一個非常常見的應用，其產生的下拉式功能表也是用到了position屬性。我們先看看下面的效果：

自動完成輸入框

這是一個很簡單常見的下來自動完成框，我們來看看它的HTML和CSS代碼：
HTML代碼

<input class="search-box" type="text" placeholder="請輸入關鍵字" value="position" />  <ul style="left:58px;">      <li>position屬性</li>      <li>position應用</li>      <li>position是什麼</li>      <li>position翻譯</li>  </ul>

CSS代碼

.search-box { border: 1px solid #ccc; width: 200px; padding: 5px; height: 24px; margin-left: 50px; }ul, li { list-style-type: none; }ul { border: 1px solid #ccc; width: 210px; position: absolute; }li { padding: 5px; }

這個原理也很簡單，通過設定下拉式功能表為絕對位置，然後設定其left屬性與輸入框對齊。

當然position的應用還有很多，比如布局，比如fixed可以用來做固定導覽功能表，網頁右下角的固定菜單等，有興趣的同學可以自行尋找相關資料進行學習。

總結

position屬性是一個容易讓初學者迷惑的屬性，尤其是absolute和relative的應用。要用好它們，首先要從absolute和relative的基本特性開始瞭解，理解了他們的特性之後應用起來就得心應手了，瞭解基本原理後，多多寫幾個例子從實踐中去體會它們的特性，慢慢的就會熟悉了。