position屬性
在前端中，position是很常見的屬性。通過這個屬性可以調整dom元素在瀏覽器中顯示的位置。
它有幾個常用的屬性：
- static 默認值。通常是在覆蓋
absolute或者relative樣式時使用。 - relative 相對定位。相對於原本自己的位置，其他的元素樣式不會發生改變。
- position 絕對定位。相對於最近的一個應用absolute或者relative的父元素，然后相對這個元素進行定位。
- fixed 相對瀏覽器定位。
- inherit 繼承父樣式。
其中relative、position、fixed比較難於理解，下面就介紹下這三個：
relative
看意思是相對定位，那么是相對什么進行定位呢？其實是相對它原本的位置。比如學生站隊，教練喊小明。小明出隊，向前走了一步。
這就相當於:
小明{
position:relative;
向前一步！
}
看圖也容易理解，原本三個span的位置為：
<html>
<body>
<span class="span-1" style="background-color:red;padding:10px;">1</span>
<span class="span-2" style="background-color:blue;padding:10px;">2</span>
<span class="span-3" style="background-color:green;padding:10px;">3</span>
</body>
</html>
當我們對第2個span添加相對定位后，它先對於原始的位置偏移。
<html>
<head>
<style type="text/css">
.span-2 {
position:relative;
top:10px;
left:10px;
}
</style>
</head>
<body>
<span class="span-1" style="background-color:red;padding:10px;">1</span>
<span class="span-2" style="background-color:blue;padding:10px;">2</span>
<span class="span-3" style="background-color:green;padding:10px;">3</span>
</body>
</html>
absolute
這個屬性比較復雜，看屬性的名字是絕對定位，其實不然。
它也是一種相對定位，不過相對的不再是自己，而是父元素。具體是哪個父元素，就要看父元素是否應用了position屬性。
舉個例子，最開始我們有3個嵌套的div
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<div class="div-1" style="background-color:red;padding:10px;">1
<div class="div-2" style="background-color:blue;padding:10px;">2
<div class="div-3" style="background-color:green;padding:10px;width:20px;height:20px;">3
</div>
</div>
</div>
</body>
</html>
如果對第3個div應用absolute定位，那么會出現下面的效果：
<html>
<head>
<style type="text/css">
.div-3 {
position:absolute;
right:0;
top:0;
}
</style>
</head>
<body>
<div class="div-1" style="background-color:red;padding:10px;">1
<div class="div-2" style="background-color:blue;padding:10px;">2
<div class="div-3" style="background-color:green;padding:10px;width:20px;height:20px;">3
</div>
</div>
</div>
</body>
</html>
如果對div-1應用position為relative或者absolute，則div-3就會相對div-1進行定位。
<html>
<head>
<style type="text/css">
.div-1{position:relative;}
.div-3 {
position:absolute;
right:0;
top:0;
}
</style>
</head>
<body>
<div class="div-1" style="background-color:red;padding:10px;">1
<div class="div-2" style="background-color:blue;padding:10px;">2
<div class="div-3" style="background-color:green;padding:10px;width:20px;height:20px;">3
</div>
</div>
</div>
</body>
</html>
由此可以看出，如果父元素沒有應用position樣式，那么就會繼續向上查找，直到html元素。如果都沒有找到，absolute就會根據html進行定位；相反，如果找到某個父元素有absolute或者relative或者fixed，則會先對這個元素進行定位。
fixed
這個就比較容易理解了，它是相對瀏覽器的窗口進行定位。
比如博客園的推薦按鈕，或者導航，都可以應用這個position樣式。