postion 屬性定義了一個(gè)元素在頁(yè)面布局中的位置以及對(duì)周?chē)氐挠绊憽Ｔ搶傩怨灿?個(gè)值：

position: absolute
position: relative
position: fixed
position: static
position: inherit
本文主要詳細(xì)討論 position 屬性的前三個(gè)值，首先大概講解下后兩個(gè)值：

static

static 為 position 屬性的默認(rèn)值，static 元素會(huì)遵循正常的文檔流，且會(huì)忽略 top,bottom,left,right 等屬性。

inherit

inherit 值如同其他 css 屬性的 inherit 值，即繼承父元素的 position 值。

absolute

absolute 元素將會(huì)脫離正常的文檔流，所以 其周?chē)脑貙?huì)忽略它的存在。如同 absolute 元素的 display 屬性被設(shè)為了 none 一樣。此時(shí)，我們可以使用 top,bottom,left,right 等屬性對(duì) absolute 元素進(jìn)行絕對(duì)定位。一般情況下定義兩個(gè)屬性，top 或 bottom,left 或 right。
這個(gè)絕對(duì)定位需要稍微理解下，因?yàn)檫@里容易與 relative 產(chǎn)生混淆。
例如，當(dāng)對(duì) absolute 元素添加 left:10px 定位后，這個(gè) left 究竟是對(duì)哪個(gè)元素而言呢？其實(shí)，此時(shí)將會(huì)往上查找 absolute 元素的第一個(gè)父元素，如果該父元素的 position 值存在（且不為 static）,那么這個(gè) left:10px 就是根據(jù)該父元素進(jìn)行的定位，否則將會(huì)繼續(xù)查找該父元素的父元素，一直追溯到某個(gè)父元素具備不為 static 的 position 值為止，如果不存在滿(mǎn)足條件的父元素，則會(huì)根據(jù)最外層的 window 進(jìn)行定位。

//直接忽略 absolute 元素的存在

relative

relative 元素遵循正常的文檔流，所以周?chē)夭粫?huì)忽略它的存在，relative 元素同樣支持 top,bottom,left,right 等屬性。當(dāng)我們使用 top,bottom,left,right等屬性對(duì) relative 元素進(jìn)行相對(duì)定位時(shí)的效果有點(diǎn)類(lèi)似于 margin 屬性達(dá)到的效果，但是區(qū)別在于， relative 元素周?chē)脑貙?huì)忽略 relative 元素的移動(dòng)。我們注意，當(dāng) relative 元素未使用定位屬性進(jìn)行相對(duì)定位時(shí)，它不會(huì)被周?chē)脑睾雎?，但利用定位屬性進(jìn)行定位后，周?chē)脑貢?huì)忽略 relative 元素的移動(dòng)，它們會(huì)認(rèn)為 relative 元素仍然在原來(lái)的位置，并未進(jìn)行移動(dòng)，我們用個(gè)例子來(lái)說(shuō)明：

//并未忽略 relative 元素的存在

全選復(fù)制放進(jìn)筆記

//忽略了 relative 元素的移動(dòng)

fixed

fixed 元素將會(huì)脫離正常的文檔流，所以它與 absolute 元素很相似，同樣會(huì)被周?chē)睾雎?，支?top,bottom,left,right 屬性，但兩者仍有很大不同。
首先，fixed 元素定位與它的父元素?zé)o任何關(guān)系，它永遠(yuǎn)是相對(duì)最外層的 window 進(jìn)行定位的。
第二，fixed 元素正如它的名字一樣，它是固定在屏幕的某個(gè)位置，它不會(huì)因?yàn)槠聊坏臐L動(dòng)而消失。

全選復(fù)制放進(jìn)筆記

//如同 absolute，fixed元素也被周?chē)睾雎?/p>

因?yàn)橥鈱?div 高度超過(guò)一屏，所以現(xiàn)在我們往下滾動(dòng)屏幕。
//只有 fixed 元素未因?yàn)槠聊粷L動(dòng)而消失，因?yàn)樗?ldquo;固定”的

z-index

為什么要在這里提到 z-index 屬性呢？那是因?yàn)?z-index 屬性只對(duì)定位元素有效，即 position 值為 absolute,relative,fixed 時(shí)才有效。我們首先了解下什么叫 z-index。

從上圖我們不難發(fā)現(xiàn) z-index 值代表的是元素的堆疊順序，值越高則顯示順序越優(yōu)先。

//fixed 元素 z-index 比 absoulute 元素高，所以顯示在前面

（我把背景色調(diào)為非透明，這樣可以看得更清楚），假如 z-index 值相同會(huì)出現(xiàn)什么情況呢？

//z-index 值相同，仍然顯示為 fixed 元素

所以我們知道，當(dāng) z-index 值相同時(shí)，后加載的元素顯示優(yōu)先。

綜合例子
HTML 

   </div>

簡(jiǎn)單的運(yùn)用一點(diǎn)樣式：
CSS

效果：