相信很多同學在編寫、設計**的時候多多少少用過css裡的position這個屬性，但是很多時候網頁顯示出來的和自己想象的不太一樣，這篇部落格來教你怎麼使用position。
position屬性共有5個不同的值，下面是w3school給出的**解釋：
其中，如果不對dom中的元素設定position屬性，那麼預設值為static，也就是說此時設定top, bottom, left, right和z-index都是無效的。
先來看乙個栗子，後面都會圍繞這個栗子來講述： jsfiddle演示（
首先，元素#inner1的position為absolute，意味著它脫離了dom tree的約束，當top, bottom, left, right四個屬性沒有被設定，並且父元素裡沒有其它元素在dom tree裡位於它前面時，它將位於父元素的左上角；當有其它元素在它前面時，它將位於此元素下面的左上角；當top, bottom, left, right四個屬性被賦值時，它的位置將相對於瀏覽器視窗來定，比如設定 將位於整個瀏覽器視窗的左上角，並不會隨視窗滾動而滾動。前面說的兩種情況都是針對父元素為static的情況，如果父元素為relative，則即使子元素設定了absolute，也將永遠相對于父元素來定位（此技巧可用於網頁區域性區域內的元素定位，比float好用）。
再來看元素#inner2，它是relative的，意味著將相對於正常位置（static）來移動。#inner2的left屬性被設為100px，它的位置緊挨著#inner1，而這個也證實了absolute的元素確實脫離了dom tree，不然#inner2將距離#inner1 100px。
為了解釋inherit和z-index，我又設定了乙個#inner3元素，它的position值繼承了父元素#outer，也就是relative。此時你可以看到它預設位於前兩個子元素的上方，是因為在dom tree裡它位於前兩個子元素後面，並且z-index沒有被賦值。此時如果你將我注釋掉的那行**（z-index: -1）取消注釋，重新run一次會發現它位於了前兩個子元素的下方。這個是因為z-index預設值為0，0比-1大。注意，父元素#outer的z-index也被設為了-1，如果父元素的z-index也是預設值0的話，那麼子元素#inner3將會父元素下方，我們也就看不見了。
關於fixed屬性，我沒有給出例項，因為它比較簡單。position的值被設定為fixed的元素不會隨著瀏覽器視窗的滾動而移動，永遠固定於目前視窗的某個位置。可以經常看到很多**的頂部導航欄或者文件**的左側導航欄都做了類似的處理。
CSS position屬性用法
絕對定位 position absolute 有如下兩種情況 1，沒有設定 top right bottom left 的情況，預設依據父級的 內容區域原始點 為原始點 2，有設定 top right bottom left 的情況，這裡又分了兩種情況如下 1 父級沒 position 屬性，瀏覽器...
CSS position 屬性分析
position是css重要的屬性，通過設定position，可以把元素放置到乙個靜態的 相對的 絕對的或者是固定的位置中。position有以下五個屬性 在某些資料 中，可能只會介紹前四個屬性 值描述 static 預設值，設定了static的屬性，沒有定位，它會出現在正常的流中。relative...
CSS Position 定位屬性
本篇文章主要介紹元素的position屬性，此屬性可以設定元素在頁面的定位方式。1.介紹 position 介紹position的值以及輔助屬性。2.position 定位方式 介紹position的四種定位方式 絕對 相對 固定 預設。3.總結 position 以示例的方式展示position。...