CSSPosition定位

　　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屬性

　　　　
　　　　　　

　　　　　　　　　　　　　　　　　　　　position:absolute;
　　　　　　　　　　　　　　　　　　　　　　　top:150px
　　　　　　　　　　}
　　　　　　　}
　　　　　　　　]

　　　　　　　　　　　　　　

這是帶有絕對定位的標題

下面的標題距離頁面左側 100px，距離頁面頂部 150px。

　　　　　　

　　　　

　　2.relative屬性()　

　　　　

　　　　　　

　　　　　　　　
　　　　　　
　　　　　　　　

這是位於正常位置的標題

　pos　　　四〵》2]24%)>對於這個位置（L4D] 外移2H]L])>對於這個位置（L4ft] 平底　
　　　　　　　　

這個標題相對於其正常位置向右移動

　　　　　　　　

相對定位會按照元素的原始位置對該元素進行移動。

　　　　　　　　

樣式 "left:-20px" 從元素的原始左側位置減去 20 像素。

　　　　　　　　

樣式 "left:20px" 增加 20 個像素到元素的原始左側位置。

　　　　　　

　　　　

　　3.fixed屬性
　　　


　　　　

　　　　　　

　　　　　　　　

　　　　　　　　　　　　　position:fixed;

　　　　　　　　　　　　　　　　　　　　　　　　top:5px;　　　　　　　　　　　　　　　　　position:fixed ;　　　　　　　　　　　　　top:30px;

　　　　　　　　　　　　　　　　　　　　　　　　　、　　　　}

　　　　　　　　
　　　　　　　　　　　　　　

一些文字。

　　　　　　　　

更多的文字。

　　　　　　
　　　　

 

　　在進行元素定位時，如果兩個元素之間發生衝突，可以使用z-index屬性為元素設定優先權，z-index可被用於將一個元素放置於另一個元素之後，預設值為0，假設兩個元素A和B，A的z-index屬性預設為0，而將B的z-index屬性設為-1，那麼，B元素的優先權就低於A元素。

　　那麼什麼是絕對定位、什麼又是相對定位呢？

　　1.絕對定位：元素位置會根據瀏覽器頁面左上角進行定位，並使該元素脫離文檔流，並且不佔據空間。普通文檔流程中的元素佈局就像絕對定位的元素不存在一樣。簡而言之，使定位元素脫離文檔流和浮動模型，獨立於其他物件二存在，沒有佔位。

　　2.相對定位：如果對一個元素進行相對定位，首先它將出現在它所出現的位置上，然後通過垂直或水平位置，讓這個元素「相對於」它的原始起點進行移動。相對定位不會使元素脫離文檔流，被設定元素相對於其原始定位進行進一步定位，其原始佔位資訊仍然存在。