position屬性可以讓你讓你隨意控制一個特定元素在瀏覽器何處以及如何顯示。比方說我們用position:fixed 讓一個圖片顯示在瀏覽器的左上角.即使出現(xiàn)滾動條他依然可以在瀏覽器的左上角.posotion屬性有4個取值.由于static為默認(rèn)的方式。所以實際上可用的值只有3個 為了方便閱讀~ 以下統(tǒng)稱為:固定(fixed)、相對(relative)、 絕對(absolute).
第1:固定定位(fixed)
固定定位可以讓某一元素固定在屏幕的某個位置.其效果和背景的background-attachment:fixed屬性相似!但是IE6以及更早的版本不支持.所以以下例子請在非IE6以下瀏覽器下瀏覽
例子:
運行代碼框 [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]
第2:相對定位(relative)
相對定位是依據(jù)設(shè)置定位屬性的4個方向上的任意值來實現(xiàn)相對與其本來在文檔中正常顯示的位置的偏移;
當(dāng)相對定位的元素偏移出其本來的文檔流的位置:其他元素仍然認(rèn)為那個位置為其的邏輯文檔流區(qū)域.而不會去補上去,雖然我們感官上認(rèn)為那里是沒有東西的~
例子:
運行代碼框 [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]
其中第2個色塊就是相對于其本來的文檔流中的位置依據(jù)left:10px;top:20px;的定位屬性值進(jìn)行偏移.
其后面的第3個色塊依然認(rèn)為前面的空白(就是第3的原本的文檔流的位置)為第3個色塊的文檔流區(qū)域 則不會自動填充上去.
當(dāng)相對定位的父元素出現(xiàn)滾動條時,IE瀏覽器的特殊情況 例子:
運行代碼框 [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]
當(dāng)相對定位的父元素有滾動條的時候,該相對定位元素再IE的表現(xiàn)很詭異 (其后面的元素依然認(rèn)為那個位置為該元素的默認(rèn)位置,而表現(xiàn)出相對定位的特性,但是拉動滾動條時,在FF下正常即相對定位的元素和文檔一起滾動,但是在IE系列里面,相對定位的色塊依然在原地不動,此時元素的特性有點像絕對定位)
當(dāng)相對定位同時擁有定位屬性的4個方向的值和margin屬性。相對定位的定位屬性 top right bottom left和margin-top margin-right margin-bottom margin-left;各個方向上一至的時候其值會產(chǎn)生疊加效果,而按照方向執(zhí)行疊加后的數(shù)值的偏移
例子:
運行代碼框 [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]
出處:藍(lán)色理想
責(zé)任編輯:bluehearts
上一頁 下一頁 position兩三事 [2]
◎進(jìn)入論壇網(wǎng)頁制作 、WEB標(biāo)準(zhǔn)化 版塊參加討論,我還想發(fā)表評論 。