position是CSS中非常重要的一個屬性炉爆，通過position屬性穴张，我們可以讓元素相對于其正常位置，父元素或者瀏覽器窗口進行偏移。postion也是初學者容易搞不清楚狀況的一個屬性炕泳，本文將從最基礎的知識講起林说，談談關于positon屬性的一些理論與應用煎殷。
基礎知識
postion屬性我們成為定位，它有4個不同類型的定位腿箩，這些類型會影響元素的生成方式，下面我們詳細說明position屬性劣摇。
position四種類型
（1）static
static是position屬性的默認值珠移，默認情況下，塊級元素和行內(nèi)元素按照各自的特性進行顯示末融。
（2）relative
relative翻譯成中文稱相對定位钧惧，設置了這個屬性后，元素會根據(jù)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; }
效果圖：
在這個例子中，div.relative相對定位艺栈，并且left設置為20px英岭，left設置為50px，其相對于父元素進行偏移湿右，并且原本的空間也占據(jù)著诅妹，下面的元素并不會頂替上去。
（3）absolute
元素設置成absolute后會脫離文檔流毅人，并且不占有原本的空間吭狡，后面的元素會頂替上去，而且不論元素是行內(nèi)元素還是塊級元素丈莺，都會生成一個塊級框划煮，也就是例如行內(nèi)元素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; }
效果圖：
如圖所示般此，span標簽被設置成絕對定位，就可以設置height和width屬性牵现，而且不占有原本的空間铐懊，后面的div元素會頂替上去。
（4）fixed
fixed的表現(xiàn)方式類似于absolute瞎疼，但是相比于absolute相對于不確定的父元素進行偏移科乎，fixed就是相對于瀏覽器窗口進行偏移。
包含塊
在詳解CSS float屬性中我們提到包含塊這個概念贼急。對于position屬性也有包含塊這個屬性茅茂，它要分幾種情況來討論：
1.根元素的包含塊捏萍，根元素一般是html元素，有些瀏覽器會使用body作為根元素空闲，大多數(shù)瀏覽器令杈，初始包含塊是一個視窗大小的矩形；
2.非根元素的包含塊碴倾，如果該元素的position是relative或static逗噩，它的包含塊是最近的塊級框，表的單元格或行內(nèi)塊的內(nèi)容邊界我們舉例進行說明：
HTML代碼：
<div>
我是父級元素的內(nèi)容
<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; }
效果圖：
這是相對定位元素的包含塊跌榔，為最近的塊級框异雁，表的單元格或行內(nèi)塊的內(nèi)容邊界，相對定位元素相對于其包含塊進行偏移僧须，我們可以簡單理解為相對于其原來的位置進行偏移纲刀。
3.非根元素的包含塊，如果該元素的position是absolute担平，則包含塊為最近的position不是static的祖先元素示绊。
簡單來說，它的包含塊會從父級元素一直向上查找驱闷，找到第一個position不是static的元素為止耻台。
偏移屬性
前面的例子中已經(jīng)涉及到偏移屬性，它指的是元素相對于其包含塊的偏移空另，我們稱其為偏移屬性盆耽，分別是top，bottom扼菠，left摄杂，right，依次代表上下左右循榆。他們的值可以是具體的數(shù)值析恢，也可以是百分比。如果是百分比秧饮，top和bottom是相對于包含塊高度的百分比映挂，left和right是相對于寬度的百分比。它們也可以設置負值盗尸，即有可能將元素移動到包含塊的外邊柑船。
絕對定位
接下來我們了解一下絕對定位的詳細細節(jié)。
基本的絕對定位
一個元素被設置為絕對定位時泼各，會脫離文檔流鞍时，然后相對其包含塊進行偏移。
一般來說，我們會將一個元素設置為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笙僚，根據(jù)body進行偏移，第二個絕對定位元素設置了一個relative的父元素灵再，它根據(jù)父元素進行偏移味咳。
絕對定位的重疊問題
元素設置成絕對定位后會脫離文檔流，并且失去占用的空間檬嘀，而且如果偏移的位置接近，會造成重疊問題责嚷≡蓿看看下面的例子：
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，數(shù)值越高的元素層級越高柿菩，就可以蓋住低于其層級的元素戚嗅，我們設置第一個原色的z-index為10，結果如下：
如果兩個元素的層級相同枢舶，則越后面的元素會覆蓋前面的元素懦胞，默認情況下，第二個元素就會蓋住第一個元素凉泄。
固定定位
fixed定位很簡單躏尉，類似與absoulte，但是它的包含塊就是瀏覽器窗口后众，相對來說簡單很多胀糜。常見的應用比如固定導航，回到頂部蒂誉。在這里不再贅述教藻，大家可以查找相關資料。
相對定位
relative定位的元素進行偏移后拗盒，不會脫離文檔流怖竭，還有占據(jù)原本的空間。除此之外陡蝇，我們還要注意一個細節(jié)：如果元素設置了margin為負值之后發(fā)生重疊的情況下痊臭，相對定位的元素會覆蓋普通元素哮肚。我們看看下面的例子：
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屬性最經(jīng)常的一個應用應該是作為absolute元素的包含塊了分唾，為了限制absolute元素的偏移位置抗碰，常常設置其父元素為relative來作為其包含塊。
應用舉例
position的應用非常頻繁绽乔，下面我來說說常見的一些場景：
產(chǎn)品標簽
在電商網(wǎng)站中弧蝇，我們常常可以看到產(chǎn)品的左上角或右上角有一些比如“新品”折砸，“促銷”看疗，“熱賣”等標簽，比如下圖：
這個是怎么實現(xiàn)的呢睦授，我們來模擬一下：
HTML代碼：
<div class="product">
我是產(chǎn)品
<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可以用來做固定導航菜單关摇，網(wǎng)頁右下角的固定菜單等荒叶，有興趣的同學可以自行查找相關資料進行學習。
總結
position屬性是一個容易讓初學者迷惑的屬性输虱，尤其是absolute和relative的應用些楣。要用好它們，首先要從absolute和relative的基本特性開始了解，理解了他們的特性之后應用起來就得心應手了愁茁，了解基本原理后蚕钦，多多寫幾個例子從實踐中去體會它們的特性，慢慢的就會熟悉了鹅很。
