制作浮动无刷新div

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > 实现div无刷新漂浮 </ title >
< style  type ="text/css" >
/* ---------------------
>=IE7或FireFox使用position:fixed实现div无刷新漂浮
*/
.tf1 {
    position : fixed ;
    width : 50px ;
    height : 50px ;
    border : solid 1px black ;
    top : 50px ;
    left : 200px ;
}
 

/* -----------------------
IE7以下用这个办法可以保持div无刷新漂浮(当然也适用于IE6以上的版本，不过显得太麻烦),主要是利用当标签的position:absolute且该标签的祖先标签中没有一个为相对或绝对定位
，这时该标签就相对于根标签:html标签定位,只要html标签不随浏览器的滚动条滚动，那么相对定位于html的标签也不会动
*/
html { overflow : auto ; height : 100% ; }
/* ------------------------------------
注意：html标签的overflow属性很特殊，它代表的不是当子节点的长宽超过自己长宽的时候应该怎么办，而是代表自己(即html)的长宽超过自己父节点(即浏览器)的长宽该怎么办,默认是auto(即超过就在浏览器上显示滚动条)
-------------------------------------- */
/* ------------------------------------
因为html的overflow属性不代表子节点的行为，所以当overflow:auto时:
(1)当给它设置的height值小于body加上body的外边距(margin)时，它的高度就等于body加上body的外边距(margin)
(2)当它的height大于body加上body的外边距(margin)时,它的高度就等于自己设置的height值
(3)此外html的height为100%时,若body的高度小于浏览器高度，则html的高度就为浏览器高，若body高度大于浏览器高，则html的高度等于body加上body的外边距(margin)
(4)如果不设置,html的高度就为body加上body的外边距(margin)

-------------------------------------- */
body { overflow : auto ; height : 100% ; margin : 0 0 0 0 ; }
/* ------------------------------------
注意：
body的height:100%时:
(1)若overflow:auto,且html指定了height,body则表示和浏览器的高度一样(且会随着浏览器的大小而变化)>>>>注意在IE8的非兼容性视图中,若body的height为100%且html的height不为:100%,则body的高会为html指定的height值
(2)若overflow:auto,且未指定html的高度,body则和自己的子节点的高度和(即body内要占位的所有标签高度的和)一样高
(3)若overflow未指定,body则和自己的子节点的高度和(即body内要占位的所有标签高度的和)一样高

若body的height不为100%则body高度为其height值

如果不设置就和子节点的高度和(即body内要占位的所有标签高度的和)一样高

这里设置body的overflow为auto是让body的滚动条代替浏览器的滚动条
-------------------------------------- */
.tf2 {
    position : absolute ;
    width : 50px ;
    height : 50px ;
    border : solid 1px red ;
    top : 50px ;
    left : 80px ;
}

/* ------------------------------------
综上所述:将
html{overflow:auto;height:100%;}
body{overflow:auto;height:100%;margin:0 0 0 0;}
再设置要漂浮的div的position为absolute且不嵌套在任何为相对或绝对定位的标签中，即可得到IE任何版本和FireFox兼顾的漂浮办法，
但是若只针对>=IE7或FireFox开发还是用position:fixed好些，毕竟少些麻烦！
-------------------------------------- */

</ style >
</ head >
< body >
-----------------基线-----------------
< div  style ="height:3000px;" >
< span  class ="tf1" >
ie &lt; =IE7
</ span >
< span  class ="tf2" >
ie &gt; IE7
</ span >
</ div >
</ body >
</ html >