position選項來定義元素的定位屬性,選項有5個可選值:static、relative、absolute、fixed、inherit
屬性值為relative、absolute、fixed時top | left | right| bottom | z-index才能起作用。
static(默認值)
relative(相對定位)
absolute(絕對定位)
fixed(絕對定位,絕對與window瀏覽器,低版本瀏覽器不支持如ie6和ie7)
relative和static都是相對于文檔其他元素進行定位,都屬于相對定位的范疇,區(qū)別在于一個可用控制位移,一個不能
static(默認值)
如果使用默認值,在CSS中為元素定義top、left、right、bottom、z-index都不會生效
relative
relative的變現(xiàn)和默認值一樣,只不過可用通過設置偏移量和z-index來控制相對于其他正常位置進行的偏移。
所有元素的定位(positon)默認值都是static,什么都不寫就是相對定位,而使用position:relative在不設置
top、left、z-index、right、bottom值的情況下和默認值表現(xiàn)是一樣的。
absolute和fixed
特點:
1、塊級元素的寬度在未定義時不再為100%,而是根據內容自動調整
2、在不定義z-index的情況下,absoulte元素會覆蓋在其他元素上。
3、它會脫離正常的文檔流,不再占據空間,類似于浮動后的效果
absolute是相對上一個不為static的父元素進行絕對定位。如果不指定父元素的position,
absolute將相對于整個html文檔進行絕對定位。
fixed
生成絕對定位的元素,相對于瀏覽器窗口進行定位。也就是說,不論網頁如何滾動,該元素始終停留在屏幕的某個位置。
如果我們希望左側邊控制欄始終對用戶可見,就使用position:fixe來進行定位。
如果ie6和ie7不支持fixed屬性怎么辦
解決辦法
用position:absolute
_top:expression(eval(document.documentElement.scrollTop))
【 微信掃一掃 】