Position這個屬性定義建立元素佈局所用的定位機制。任何元素都是可以進行定位的，不過絕對或者固定一個元素會產生一個塊級框，不論該元素是什麼類型；相對定位元素會相對於它在正常文檔流中的預設位置偏移。 Position元素一般來說擁有五個屬性，分別有： 1.absolute(生成絕對定位的元素，相對 ...
Position這個屬性定義建立元素佈局所用的定位機制。任何元素都是可以進行定位的，不過絕對或者固定一個元素會產生一個塊級框，不論該元素是什麼類型；相對定位元素會相對於它在正常文檔流中的預設位置偏移。
Position元素一般來說擁有五個屬性，分別有：
1.absolute(生成絕對定位的元素，相對於static定位以外的第一個父元素進行定位。元素的位置通過top、left、right、bottom進行設置。)
2.fixed(生成絕對定位的元素，與absolute不同，fixed是相對於瀏覽器視窗進行定位。元素的位置設置方式與absolute相同。)
3.relative(生成相對定位的元素，相對於瀏覽器的視窗進行定位。因此，"left:20px;"會向元素的左方位置添加20個像素。)
4.static(position元素的預設值，沒有定位，故此元素會出現在正常的文檔流中)
5.inherit(設定應該從父元素繼承position屬性的值。)
下麵我們針對各種屬性列出一些實例代碼：
1.absolute屬性
<html>
<head>
<style type="text/css">
h2.pos_abs{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">這是帶有絕對定位的標題</h2>
<p>通過絕對定位，元素可以放置到頁面上的任何位置。下麵的標題距離頁面左側 100px，距離頁面頂部 150px。</p>
</body>
</html>
2.relative屬性()
<html>
<head>
<style type="text/css">
h2.pos_left{
position:relative;
left:-20px
}
h2.pos_right{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>這是位於正常位置的標題</h2>
<h2 class="pos_left">這個標題相對於其正常位置向左移動</h2>
<h2 class="pos_right">這個標題相對於其正常位置向右移動</h2>
<p>相對定位會按照元素的原始位置對該元素進行移動。</p>
<p>樣式 "left:-20px" 從元素的原始左側位置減去 20 像素。</p>
<p>樣式 "left:20px" 向元素的原始左側位置增加 20 像素。</p>
</body>
</html>
3.fixed屬性
<html>
<head>
<style type="text/css">
p.one{
position:fixed;
left:5px;
top:5px;
}
p.two{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="one">一些文本。</p>
<p class="two">更多的文本。</p>
</body>
</html>
在進行元素定位時，如果兩個元素之間發生衝突，可以使用z-index屬性為元素設置優先順序，z-index可被用於將一個元素放置於另一個元素之後，預設值為0，假設兩個元素A和B，A的z-index屬性預設為0，而將B的z-index屬性設為-1，那麼，B元素的優先順序就低於A元素。
那麼什麼是絕對定位、什麼又是相對定位呢？
1.絕對定位：元素位置會根據瀏覽器頁面左上角進行定位，並使該元素脫離文檔流，並且不占據空間。普通文檔流中的元素佈局就像絕對定位的元素不存在一樣。簡而言之，使定位元素脫離文檔流和浮動模型，獨立於其他對象二存在，沒有占位。
2.相對定位：如果對一個元素進行相對定位，首先它將出現在它所出現的位置上，然後通過垂直或者水平位置，讓這個元素“相對於”它的原始起點進行移動。相對定位不會使元素脫離文檔流，被設置元素相對於其原始定位進行進一步定位，其原始占位信息仍然存在。
