Position在頁面佈局中由十分重要的作用。利用position定位和z-index值的設定可以對文檔進行分層。對頁面樣式有了更好的渲染。（只有在進行了定位後z-index值纔會有效果）
目前幾乎所有主流的瀏覽器都支持position屬性（”inherit”除外，”inherit”不支持所有包括IE8和之前版本IE瀏覽器）。position可能的值有以下五種。
其中最常用的三種定位爲absolute、relative和fixed。
當沒有進行定位時爲默認值static。而relative與absolute結合的定位方式也越來越多的運用在頁面當中。
1、absolute（絕對定位）
absolute是生成覺對定位的元素，脫離了文本流（即在文檔中已經不佔據位置），參照瀏覽器的左上角通過top,right,bottom,left（簡稱TRBL） 定位。可以選取具有定位的父級對象或者body座標原點進行定位，也可以通過z-index進行層次分級。absolute在沒有設定TRBL值時是根據父級對象的座標作爲始點的，當設定TRBL值後則根據瀏覽器的左上角作爲原始點。
關於absolute定位我看到了一種說法說在沒有對TRBL進行設定時，實際是未脫離文檔流的只是丟失了寬高。但是經過試驗發現即使爲設定TRBL而是用margin值進行定位時，這種定位方式仍然使得元素脫離了文檔流。
下面來看一個關於position定位的例子：
html：
<div id="introduce">
<div id="tsct">
<img src="img/tsct.png">
</div>
<div id="module1">
<h1>港囧</h1>
<h5>《港囧》是由北京真樂道文化傳播有限公司、北京光線影業有限公司等聯合出品的愛情喜劇影片，該影片由徐崢執導，由徐崢、趙薇、包貝爾、杜鵑、葛民輝聯合主演。影片於2015年9月25日在全國上映。影片講述了徐來陪伴老婆及家人來到香港旅遊，計劃與大學初戀楊伊偷偷會面，無奈被小舅子識破其醉翁之意不在酒，從而引發一場歡樂香港遊的囧途的故事。
<a href="#"> >>></a>
</h5>
</div>
<div id="module2">
<h5>
<a href="#" class="gray">信 息</a> 中國大陸 | 114分鐘 | 2015年9月25日<br/>
<a href="#" class="gray">導 演</a> 徐崢<br/>
<a href="#" class="gray">類 型</a> 喜劇
</h5>
</div>
<div id="ygp">
<p>預告片<p>
<a href="http://www.iqiyi.com/v_19rrnn4jpg.html?vfm=m_127_bdbk" target="_blank">
<img src="img/ygp.png" />
<a>
</div>
</div>css：
#module1{
top: 215px;
position: absolute;
left: 130px;
width:560px;
height:165px;
border-bottom:1px #999 solid;
}效果圖：
其中module1那個div塊就是相對於其父元素introuduce進行定位的。
2、relative（相對定位）
relative是相對的意思，顧名思義就是相對於元素本身在文檔中應該出現的位置來移動這個元素，可以通過TRBL來移動元素的位置，實際上該元素依然佔據文檔中原有的位置，只是視覺上相對原來的位置有移動。
這種定位方式用在僞類a:hover中會有很棒的效果。
css：
#mz a{
display: block;
width: 80px;
height: 80px;
background:url(image/Sorting-Hat.png);
background-size:cover;
}
#mz a:hover{
position: relative;
margin-left: 30px;
display: block;
width: 128px;
height: 128px;
background:url(image/Sorting-Hat.png);
background-size:cover;
}html代碼：
<a id="mz"></a>效果圖如下：
鼠標放上去就會變成：
圖標就會較原來位置有明顯移動。如果用得好可以有很棒的效果。
3、fixed（絕對定位）
fixed用於生成絕對定位的元素，相對於瀏覽器窗口進行定位。
元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。
position 屬性規定元素的定位類型。這個屬性定義建立元素佈局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什麼類型。相對定位元素會相對於它在正常流中的默認位置偏移。
html：
<div id="share">
<p>分享</p>
<div id="qzone">
<a href="#" target="_blank"></a>
</div>
<div id="sina">
<a href="#" target="_blank"></a>
</div>
<div id="tencent">
<a href="#" target="_blank"></a>
</div>
<div id="other">
<a href="#" target="_blank"></a>
</div>
</div>css：
#share{
position: fixed; /*相對於瀏覽器的定位*/
width: 48px;
height: 203px;
z-index:50;
top:210px;
right:0px;
background：#F5F5F5；
}效果圖：
share模塊將會隨着滾動條的滾動滾動變換位置，始終保持在屏幕的固定位置。
下面將討論在絕對定位中關於參照點的問題。
<div id="banner">
<a href="#" target="_blank" >
<img src="img/dring.png" />
</a>
</div>css：
#banner{
z-index: 60;
position: absolute; /*絕對定位時bottom屬性的參照點是瀏覽器的第一屏(就是沒有移動滾動條的時候)的可視區域的下邊緣。*/
height:100px;
width:960px;
bottom: 170px;
left: 200px;
}效果圖：
可見這裏的bottom值是相對於頁面可視區域的第一幕頁面而非整個頁面的。而且拖動滾動條不會有變化。
但是隻要對css文本進行一些修改就可以達到相對整個頁面佈局的效果。
給body加上動態定位。
body{
position: relative;
/*如果顯示的把body設爲動態定位，例如相對定位，那麼bottom的參照點就是整個body區域的下邊緣，而不是瀏覽器可視區域的下邊緣*/
}現在效果圖如下：
用bottom來進行絕對定位時，要知道它的參照點是瀏覽器的第一屏(就是沒有移動滾動條的時候)的可視區域的下邊緣，而不是整個頁面的下邊緣。所以做多頁面的footer時慎用bottom定位。
