接觸CSS已有相當(dāng)長(zhǎng)一段時(shí)間，我們竟然沒(méi)有留意position:fixed的用法。
我們都知道CSS中定位屬性position的值，除了默認(rèn)的值外，還有absolute,relative和fixed。我平時(shí)比較常用absolute和relative，而position:fixed卻沒(méi)多關(guān)注。或許是因?yàn)楫?dāng)初在CSS中文手冊(cè)中看到position:fixed旁邊有說(shuō)明“IE5.5及NS6尚不支持此屬性”吧。
前段時(shí)間，在做一個(gè)項(xiàng)目時(shí)需要使一個(gè)層相對(duì)于瀏覽器邊框固定，那時(shí)用position:absolute試了下，發(fā)覺(jué)absolute是對(duì)網(wǎng)頁(yè)邊框而言的。后來(lái)，上網(wǎng)查了一些根據(jù)滾動(dòng)條的移動(dòng)，動(dòng)態(tài)地改變left和top的值的JavaScript語(yǔ)句，雖然能實(shí)現(xiàn)了類似的效果，但滾動(dòng)條移動(dòng)時(shí)，那個(gè)層晃來(lái)晃去的，感覺(jué)不好看，想要一種能使層固定不動(dòng)的做法。
且看下面的代碼：
|
<style type="text/css">
<!--
#help{
width:30px;
height:20px;
background-color:green;
position:fixed;
left:60px;
top:100px;
}
-->
</style>
|
我們用上面這段代碼來(lái)定義頁(yè)面上的一個(gè)層“help”（id=“help”）。這樣就能實(shí)現(xiàn)我們想要的效果了。
在IE8、Firefox、Opera、Google等瀏覽器中測(cè)試，都沒(méi)有問(wèn)題，唯獨(dú)低版本的IE中，這個(gè)屬性無(wú)效。
本文原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處，謝謝！http://www.aygfsteel.com/rongxh7（心夢(mèng)帆影JavaEE技術(shù)博客）
posted on 2009-11-22 14:58
心夢(mèng)帆影 閱讀(85038)
評(píng)論(25) 編輯 收藏 所屬分類:
Web前端開(kāi)發(fā)