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