css中position 定位的兼容性，以及定位的使用及層級的應用
一、首先我們來看看定位的兼容性，當然是在IE6、7但是現在大多數公司都已經不考慮了 我們就作為一個了解吧：
1、在IE67下,子元素有相對定位的話,父級的overflow:hidden包不住子元素
解決辦法: 給父級也加相對定位
2、在IE6下絕對定位元素的父級寬高是奇數的時候，元素的right值和bottom值會有1px的偏差
解決辦法: 父級不要設置雙數。
這裏就不上代碼給大家解釋了，如果小夥伴們想具體了解請自行用代碼到IE6\7上面去測試。
二、現在定位有三種position:relative 相對定位、position:absolute絕對定位、position:fixed固定定位、position:static默認定位、position:inherit繼承定位，現在具體來描述一下這五種定位的特征：
1、position:relative 相對定位 相對於自身
1）不影響元素本身特性
2）不使元素脫離文檔流 （移動之後原始位置會被保留）
3）如果沒有定位偏移量，對元素本身沒有任何影響
4）提升層級
2、position:absolute 絕對定位 相對於父級(如果父不設置relative，那麽子會向上尋找祖先元素，看是否設置relative。如果有則相對於設置的relative來進行定位，如果沒有，那麽就相對於body窗口來定位。)
1）使元素脫離文檔流
2）使內嵌元素支持寬高
3）塊屬性標簽內容撐開寬高
4）如果有定位父級相對於父級發生偏移，沒有父級相對於document發生偏移
5）相對定位是配合絕對定位使用的
6）提升層級
3、position:fixed； 固定定位
與絕對定位的特性基本一致，的差別是始終相對整個文檔進行定位；
問題：IE6不支持固定定位；
4、static(默認值) ；
5、inherit(從父元素繼承定位屬性的值);
以下代碼比較簡單給大家展示一下前三種定位效果：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 1、position:relative 相對定位 相對於自身 1）不影響元素本身特性 2）不使元素脫離文檔流 （移動之後原始位置會被保留） 3）如果沒有定位偏移量，對元素本身沒有任何影響 4）提升層級 2、position:absolute 絕對定位 相對於父級(如果父不設置relative，那麽子會向上尋找祖先元素，看是否設置relative。如果有則相對於設置的relative來進行定位，如果沒有，那麽就相對於body窗口來定位。) 1）使元素脫離文檔流 2）使內嵌元素支持寬高 3）塊屬性標簽內容撐開寬高 4）如果有定位父級相對於父級發生偏移，沒有父級相對於document發生偏移 5）相對定位是配合絕對定位使用的 6）提升層級 3、position:fixed； 固定定位 與絕對定位的特性基本一致，的差別是始終相對整個文檔進行定位； 問題：IE6不支持固定定位； 4、static(默認值) | inherit(從父元素繼承定位屬性的值); 5、position:absolute;和position:fixed; 絕對定位元素子級的浮動可以不用寫清浮動方法；--> <style> *{margin: 0;padding: 0;} #relative,#abselute{ position: relative; width: 500px; border: 1px solid #000000; text-align: center; } #relative{ left: 500px; top:20px; height: 20px; color: red;} #abselute{ left: 500px; top:100px; height: 300px; } #abselute div{ position: absolute; top: 100px; left: 50px; width: 100px; height: 100px; font-size: 48px; text-align: center; color: #fff; } #fixed{ width: 50px; height: 200px; position: fixed; right: 0; bottom: 0; background-color: red; } </style> </head> <body style="height: 2000px;"> <div id="relative">position: relative; </div> <div id="abselute">position: abselute; <div style="background: red;">1</div> </div> <div id="fixed">fixed</div> </body> </html>
三、層級的使用：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 定位元素默認後者層級高於前者,建議在兄弟標簽之間使用; z-index:number; 定位層級(默認0) --> <style> *{margin: 0;padding: 0;} #abselute{ position: relative; top: 20px; left: 100px; width: 500px; height: 300px; border: 1px solid #000; } #abselute div{ font-size: 48px; text-align: center; color: #fff; position: absolute; } </style> </head> <body> <div id="abselute"> <div style="background: red;z-index: 1;">1</div>//這裏使用了層級，我們就會優先看到紅色背景的色塊 <div style="background: yellow;">2</div> <div style="background: cyan;">3</div> </div> </body> </html>
如下圖：
End
css中position 定位的兼容性，以及定位的使用及層級的應用