目前大部分的瀏覽器都支持position樣式，在IE8及其以下版本的IE瀏覽器是不支持position內(nèi)的inherit值的。
來看看position都有些什么值
| 屬性 | 解析 |
|---|---|
| static | 默認(rèn)值，表示無定位 |
| absolute | 表示采用絕對定位方式，相對于position值不是static的父容器進(jìn)行定位，該值會使元素脫離文檔流，使用該值后可以用left，right，top，bottom對元素進(jìn)行移動定位 |
| relative | 表示采用相對定位的方式，相對于元素原本的位置進(jìn)行定位，該值不會使元素脫離文檔流，使用該值后可以用left，right，top，bottom對元素進(jìn)行移動定位 |
| fixed | 表示采用固定定位的方式，相對于瀏覽器窗口進(jìn)行定位，并且無論滾動條怎么滾動，使用了該值的元素都始終處于固定位置，該值會使元素脫離文檔流，使用該值后可以用left，right，top，bottom對元素進(jìn)行移動定位 |
absolute定位
- 解析
absolute生成絕對定位元素，參照position值不是static的父容器，使用left，right，top，bottom進(jìn)行定位，如果采用absolute的元素直接父容器position值為static，那么則會查詢更上一層的父容器的position值，直到<body>標(biāo)簽。 - 范例：驗證absolute的定位方式
如下代碼，當(dāng)對元素a設(shè)置了absolute后，再對其父元素設(shè)置position值部位static后，a的定位相對于其父元素：
但是當(dāng)使其父元素的position值為static后，a元素就相對于<body>標(biāo)簽進(jìn)行定位了，由此也驗證了<body>標(biāo)簽的position值不為static，這個是比較特殊的。
relative定位
- 解析
relative是相對的意思，顧名思義就是相對于元素本身在文檔中應(yīng)該出現(xiàn)的位置來移動這個元素，可以通過left，right，top，bottom來移動元素的位置，實際上該元素依然占據(jù)文檔中原有的位置，只是視覺上相對原來的位置有移動。 - 范例：驗證 relative的定位方式及其是否處于文檔流中的位置
1.驗證其定位方式，如下圖所示，因為relative是相對于自身進(jìn)行定位，所以并不需要在其父元素上添加absolute / relative / fixed：
2.驗證其是否還處于文檔流中原本的位置，如下圖所示，a元素絕對定位后，b元素并沒有因為a元素從本來位置移開而上移，證明其真正位置依舊是原本所占的位置，只是看起來移動走了：
3.相對于上面這個例子，我們再來驗證absolute定位對文檔流產(chǎn)生的影響，與上面例子一樣的代碼，只是因為a標(biāo)簽采用了absolute，b元素就上移了，證明a此時已經(jīng)不處于文檔流中的位置
fixed定位
解析
fixed的中文意思是固定的，不變的，而fixed是相對于瀏覽器窗口進(jìn)行定位的，所以總的功能形容就是設(shè)置了該值的元素始終處于瀏覽器的固定位置不變，因為他是相對于瀏覽器窗口進(jìn)行的定位，所以和absolute不同，他不需要在父元素上設(shè)置position值不為static。驗證：小廣告始終在你眼前
向下滾動后：
