在div定位中，我們經(jīng)常用到div固定浮于頁(yè)面上面，而且希望不管在什么條件下，它都是固定不動(dòng)的，當(dāng)滾動(dòng)條滾動(dòng)的時(shí)候它也靜止不動(dòng)、而且不閃動(dòng)。固定定位（fixed）IE6又不支持，讓IE6固定下來(lái)，且不閃動(dòng)是件不容易的事情。不容易也得辦啊，誰(shuí)讓IE6還不死呢？
解決辦法：這里分兩種方式固定DIV。相對(duì)于網(wǎng)頁(yè)窗口，一是從上往下固定，二是從下往上固定。
HTML代碼：
- <body style="height:2000px">
- <div id="fixedTop">風(fēng)吹不動(dòng)，雷打不動(dòng)，我就定在這愁著你！(從上往下固定我)</div>
- <div id="fixedBottom">風(fēng)吹不動(dòng)，雷打不動(dòng)，我就定在這愁著你！(從下往上固定我)</div>
- </body>
1、從下往上固定：意思就是說(shuō)從窗口底部往上調(diào)整固定距離從而固定DIV的位置。
CSS代碼：
- body{margin:0px; padding:0px;}
- #fixedBottom{
- position:fixed; bottom:0px; "http://可自定義bottom的值，離窗口底部的距離"
- _position:absolute; _bottom:0px;"http://可自定義bottom的值，離窗口底部的距離"
- _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginBottom,10)||0)));"http://可自定義修改“||”后面的值，也是離窗口底部的距離，和上面bottom的值保持一致"
- width:100%; height:30px; line-height:30px; border:1px solid #ccc;
- }
- *html{background-image:url(about:blank);background-attachment:fixed;}
上面注釋的三個(gè)地方的值要設(shè)置成一致，即是固定div離窗口底部的距離，上面代碼中固定div離窗口底部的距離為0。
2、從上往下固定：意思就是說(shuō)從窗口頂部往下調(diào)整固定距離從而固定DIV的位置。
CSS代碼：
- body{margin:0px; padding:0px;}
- #fixedTop{
- position:fixed; top:0px; "http://可自定義top的值，離窗口底部的距離"
- _position:absolute; _top:0px;"http://可自定義top的值，離窗口底部的距離"
- _top:expression(eval(document.documentElement.scrollTop+(parseInt(this.currentStyle.marginTop,10)||0)));"http://可自定義修改“||”后面的值，也是離窗口頂部的距離，和上面top的值保持一致"
- width:100%; height:30px; line-height:30px; border:1px solid #ccc;
- }
- *html{background-image:url(about:blank);background-attachment:fixed;}
上面注釋的三個(gè)地方的值要設(shè)置成一致，即是固定div離窗口頂部的距離，上面代碼中固定div離窗口頂部的距離為0。
CSS中最后一句代碼是解決固定div在IE6下滾動(dòng)條滾動(dòng)的時(shí)候閃動(dòng)的問(wèn)題。
該文章在 2014/4/21 15:32:04 編輯過(guò)
400 186 1886
