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

div在顶部不变、滚动条滚动，div还是在顶部！

直接上传源码 了：

方法一：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
  2. <html xmlns="http://www.w3.org/1999/xhtml ">
  3. <head>
  4. <title>div浮层，滚动条移动，保持位置不变</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <style type="text/css">
  7. body{background-image:url(about:blank);background-attachment:fixed;}
  8. #float{width:344px;height:34px;border:1px solid #C0DBF8;position:absolute;top:0px;}
  9. </style>
  10. </head>
  11. <body>
  12. <div id="float" >ddd</div>
  13. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  14. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  15. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  16. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  17. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  18. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  19. </body>
  20. <script type="text/javascript">
  21. var IO=document.getElementById('float'),Y=IO,H=0,IE6;
  22. IE6=window.ActiveXObject&&!window.XMLHttpRequest;
  23. while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
  24. if(IE6)
  25. IO.style.cssText="position:absolute;top:(this.fix?(document.documentElement.scrollTop-(this.javascript||"+H+")):0)";
  26. window.onscroll=function (){
  27. var d=document,s=Math.max(d.documentElement.scrollTop,document.body.scrollTop);
  28. if(s>H&&IO.fix||s<=H&&!IO.fix)return;
  29. if(!IE6)IO.style.position=IO.fix?"":"fixed";
  30. IO.fix=!IO.fix;
  31. };
  32. try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};
  33. </script>
  34. </html>
<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

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>

<div id="float" >ddd</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>

<script type="text/javascript">

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>

方法二：

  1. <STRONG><body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" style="overflow: hidden;">
  2. <!-- div</STRONG>来实现<STRONG> -->
  3. <div style="width: 100%; height: 100%; overflow: scroll;">
  4. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  5. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  6. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  7. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  8. </div>
  9. <div style="border: 1px red solid; width: 300px; height: 300px;margin:-150px 0 0 -150px; position: absolute; left: 50%; top: 50%;"></STRONG>
  10. 居中的层
  11. <STRONG> </div>
  12. </body></STRONG>
<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" style="overflow: hidden;">

 <!-- div来实现 -->

 <div style="width: 100%; height: 100%; overflow: scroll;">

  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

 </div>

<div style="border: 1px red solid; width: 300px; height: 300px;margin:-150px 0 0 -150px; position: absolute; left: 50%; top: 50%;">

  居中的层

 </div>

</body>

方法三：

  1. <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" style="overflow: hidden;">
  2. <!-- iframe来实现  -->
  3. <iframe src="http://www.csdn.net/" width="100%" height="100%" frameborder="0"></iframe>
  4. <div style="border: 1px red solid; width: 300px; height: 300px;margin:-150px 0 0 -150px; position: absolute; left: 50%; top: 50%;">
  5. 居中的层
  6. </div>
  7. </body>
<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" style="overflow: hidden;">

 <!-- iframe来实现  -->

 <iframe src="http://www.csdn.net/" width="100%" height="100%" frameborder="0"></iframe>

<div style="border: 1px red solid; width: 300px; height: 300px;margin:-150px 0 0 -150px; position: absolute; left: 50%; top: 50%;">

 居中的层

 </div>

</body>

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

  1. <style type="text/css">
  2. <!--
  3. html,body {height:100%; margin:0px; font-size:12px;}
  4. .mydiv {
  5. background-color: #f9fff6;
  6. border: 1px solid #009900;
  7. text-align: center;
  8. line-height: 25px;
  9. font-size: 13px;
  10. font-weight: bold;
  11. z-index:99;
  12. width: 300px;
  13. height: 50px;
  14. left:50%;/*FF IE7*/
  15. top:50%;/*FF IE7*/
  16. margin-left:-150px!important;/*FF IE7 half of its width */
  17. margin-top:-60px!important;/*FF IE7 half of its height*/
  18. margin-top:0px;
  19. position:fixed!important;/*FF IE7*/
  20. position:absolute;/*IE6*/
  21. _top:       expression(eval(document.compatMode &&
  22. document.compatMode=='CSS1Compat') ?
  23. documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
  24. document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
  25. }
  26. -->
  27. </style>
  28. <script language="javascript" type="text/javascript">
  29. function showDiv(){
  30. document.getElementById('popDiv').style.display='block';
  31. }
  32. window.onload=function(){
  33. showDiv();
  34. }
  35. </script>
  36. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  37. <html xmlns="http://www.w3.org/1999/xhtml">
  38. <head>
  39. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  40. <title>始终在中间DIV (支持IE FF)</title>
  41. </head>
  42. <body>
  43. <div id="popDiv" class="mydiv" style="display:none;">始终在中间<br/>
  44. </div>
  45. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  46. </body>
  47. </html>
<style type="text/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>

<script language="javascript" type="text/javascript">

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

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

</head>

<body>

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

</div>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

</body>

</html>

div浮层，滚动条移动，保持位置不变的4种方法的更多相关文章

  1. 让div盒子相对父盒子垂直居中的几种方法

    div相对于父盒子垂直居中的几种方法,之前在网上看到很多种方法,确实说的很对,也很具体,但是我感觉对于初学者来说,一目了然是最重要的,所以,我把很高深的技巧,和很复杂的css样式都剔除掉,旨在让更多人 ...

  2. div盒子水平居垂直中的几种方法

      div盒子水平居垂直中的几种方法<!DOCTYPE html><html>    <head>        <mete charset="ut ...

  3. VS编程，WPF中两个滚动条 ScrollViewer 同步滚动的一种方法

    原文:VS编程,WPF中两个滚动条 ScrollViewer 同步滚动的一种方法 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/ar ...

  4. 设置一个DIV块固定在屏幕中央（两种方法）

    设置一个DIV块固定在屏幕中央(两种方法) 方法一: 对一个div进行以下设置即可实现居中. <style> #a{ position: fixed; top: 0px; left: 0p ...

  5. 【css面试题】三个DIV要求水平对齐，左右两个DIV宽度固定为100px，中间那个DIV充满剩余的宽度（至少2种方法）

    这是我在一家公司面试时遇到的问题,当时没有答上来!! 所以看到的小伙伴一定要注意了!! 变化浏览器宽度可看到效果: 左 右 中 然后我们来看看代码: 第一种方法:(浮动) <style type ...

  6. 让块元素在div中水平居中，并且垂直居中的五种方法

    在写代码前,先做下准备工作,写两个div,设置下div的大小,把小的div放在大的div里面.可以给小的div设置下颜色,方便观看. 方法一:写一个伪元素,将它设置为行内块元素,高度与父元素相同,写一 ...

  7. 如何通过JQuery将DIV的滚动条滚动到指定的位置

    这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置,方便自动定位. var container = $('div'), inner = $('#inner'); container.scrol ...

  8. div 加滚动条

    div 加滚动条的方法: <div style="position:absolute; height:400px; overflow:auto"></div> ...

  9. [聊天框]让DIV的滚动条自动滚动到最底部 - 4种方法

    要制作一个在线聊天的程序,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息. 聊天程序是基于AJAX设计的,没有用框架,消息容器是一个DIV,所以问题就在于如何控制DIV的滚动条. ...

随机推荐

  1. 一分钟看懂Docker的网络模式和跨主机通信

    文章转载自:http://www.a-site.cn/article/169899.html   Docker的四种网络模式Bridge模式 当Docker进程启动时,会在主机上创建一个名为docke ...

  2. Unity中利用委托与监听解耦合的思路

    这篇随笔是一篇记录性的随笔,记录了从http://www.sikiedu.com/my/course/304,这门课程中学到的内容,附带了一些自己的思考. 一.单例模式的应用 首先假想一种情况,现在需 ...

  3. 关于display:none;和id特性的一些需要注意的地方

    关注点一: display:none;一旦用于某个元素,那个这个元素在页面中就不再占据位置. visibility:hidden;用于某个元素时,这个元素还会占据位置. 关注点二: 即使使用了disp ...

  4. oracle 中关于null的操作

    空值 空值一般用NULL表示 一般表示未知的.不确定的值,也不是空格 一般运算符与其进行运算时,都会为空 空不与任何值相等 表示某个列为空用:IS NULL  不能使用COMM＝NULL这种形式 某个 ...

  5. Asp.Net webconfig中使用configSections的用法

    最近闲来无事,研究研究公司的框架,无意中打开了webconfig页面,发现了一个我不认识的节点<configSections></configSections>,于是百度之,大 ...

  6. Java常见的错误种类

    数组中的错误: 越界: java.lang.ArrayIndexOutOfBoundsException 数组越界,如果声明 了5个元素的数组,但是在取值的时候用到了索引5,那就越界了 空指针:jav ...

  7. Junit参数化

    数据驱动测试:测试代码要与测试数据分离 哎~~学习时发现一个问题,写完了测试文件,右击文件时没有run as ->junit test的选项,找了好半天,终于知道了原因,是方法前没有加stati ...

  8. HttpUtils 封装类

    作为一个web开发人员,对Http 请求,并不陌生.有时候,我们请求的时候,需要使用代码实现,一般情况,我们使用Apache Jakarta Common 下的子项目.的HttpClient. 可是我 ...

  9. OC SEL (@selector) 原理及使用总结（转）

    SEL 类成员方法的指针 可以理解 @selector()就是取类方法的编号,他的行为基本可以等同C语言的中函数指针,只不过C语言中,可以把函数名直接赋给一个函数指针,而Object-C的类不能直接应 ...

  10. Unity Github 项目收集

    http://gad.qq.com/article/detail/24048 重磅推荐: Github 热门 Unity Assets 查询:http://unitylist.com/browse 最 ...