div浮层,滚动条移动,位置保持不变的4种方法汇总

　　div在顶部不变、滚动条滚动，div还是在顶部！直接上传源码了：

　　方法一：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

　　<head>

　　<title>div浮层，滚动条移动，保持位置不变</title>

　　body{background-image:url(about:blank);background-attachment:fixed;}

　　#float{width:344px;height:34px;border:1px solid #C0DBF8;position:absolute;top:0px;}

　　</style>

　　</head>

　　<body>

　　</body>

　　var IO=document.getElementById('float'),Y=IO,H=0,IE6;

　　IE6=window.ActiveXObject&&!window.XMLHttpRequest;

　　while(Y){H+=Y.offsetTop;Y=Y.offsetParent};

　　if(IE6)

　　IO.style.cssText="position:absolute;top:(this.fix?(document.documentElement.scrollTop-(this.javascript||"+H+")):0)";

　　window.onscroll=function (){

　　var d=document,s=Math.max(d.documentElement.scrollTop,document.body.scrollTop);

　　if(s>H&&IO.fix||s<=H&&!IO.fix)return;

　　if(!IE6)IO.style.position=IO.fix?"":"fixed";

　　IO.fix=!IO.fix;

　　};

　　try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};

　　</script>

　　</html>

　　方法二：

复制代码代码如下:

　　</div>

　　居中的层

　　</body></STRONG>

　　方法三：

复制代码代码如下:

　　居中的层

　　</div>

　　</body>

　　方法四：[采用css来居中]

复制代码代码如下:

<!--

　　html,body {height:100%; margin:0px; font-size:12px;}

　　.mydiv {

　　background-color: #f9fff6;

　　border: 1px solid #009900;

　　text-align: center;

　　line-height: 25px;

　　font-size: 13px;

　　font-weight: bold;

　　z-index:99;

　　width: 300px;

　　height: 50px;

　　left:50%;/*FF IE7*/

　　top:50%;/*FF IE7*/

　　margin-left:-150px!important;/*FF IE7 half of its width */

　　margin-top:-60px!important;/*FF IE7 half of its height*/

　　margin-top:0px;

　　position:fixed!important;/*FF IE7*/

　　position:absolute;/*IE6*/

　　_top: expression(eval(document.compatMode &&

　　document.compatMode=='CSS1Compat') ?

　　documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/

　　document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

　　}

　　-->

　　</style>

　　function showDiv(){

　　document.getElementById('popDiv').style.display='block';

　　}

　　window.onload=function(){

　　showDiv();

　　}

　　</script>

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<title>始终在中间DIV (支持IE FF)</title>

　　</head>

　　<body>

　　<div id="popDiv" class="mydiv" style="display:none;">始终在中间<br/>

　　</div>

　　</body>

　　</html>

教程首页更多教程