如何固定一个div层在浏览器中的位置，注意不是飘浮效果

你随便整个层放这就是固定的,不飘浮
<div id="navi_left"></div>
不知道你想要什么效果

解决方案 »

  1.   

    仔细看这个网站，把滚动条拉到最底部，<div id="navi_left"></div>也还是保持可见状态，如果不做处理，这个div肯定就随着滚动条的向下拉动消失在上方了。
      

  2.   

    我知道楼主的意思了.
    这个效果有点像gmail里的聊天窗口,是固定悬浮的.
    如果使用onscroll事件触发div重新定位,div会产生颤动.
    不知道怎么实现的,同样关注一下~~~~
      

  3.   

    楼上的明白我的意思了，呵呵！
    我说的那个站很奇怪，我把网页全部copy下来分析也找不出来是怎么搞的，难不成是服务端实现的？
      

  4.   

    #navi_left {
    LEFT: 5px; WIDTH: 150px; POSITION: fixed; TOP: 0px
    }
    #navi_right {
    RIGHT: 5px; WIDTH: 150px; POSITION: fixed; TOP: 0px
    }就是这个样式表
      

  5.   

    简单分析说明：(整个文章由三个层组成)
    navi_left:是一个表面层，即本身就可以看到结果的。
    content:这是一个表面层，即本身即可见到，但它没有设置fixed属性，所以会跟着IE滚动条而动。
    nave_right:是一个隐性层，即并非所见即所来。它连接的是一个JS，里面用了Iframe,然后用Div的fixed属性来固定它。实际运用当中，要获得跟他一模一样的效果，就不能加其它的对象载体。因为现在的人并不认可最新的WEB标准，都很喜欢用table对象来定位，这里用table就不能达到效果了。
      

  6.   

    受楼上的启发,发现fixed这个属性在非IE的浏览器里,这么设置就可以了.
    不过在IE里怎么办呢?
    另外这和table与否没关系吧?我在FF下给table用了fixed属性,结果也同样有效.
      

  7.   

    看来大家讨论的很热烈哦，呵呵。不过我还是不明白，fixed只能用在非IE的浏览器中例如firefox，但是他这个网页确实用IE就看出固定fixed效果出来了，怎么搞的？
      

  8.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
    <style type="text/css">
    body {
        margin:0; /* 必须 */
        border:0; 
        height:100%; /* 必须 */
        overflow-y:auto;/* 必须 */
        }
    #menu {display:block; top:10px; left:150px; width:130px; position:fixed;} /* IE并不认识fixed，而FF认识 */
    * html #menu {position:absolute;} /* 这个只有IE认识 */</style>
    <!--[if IE 6]>
       <style type="text/css">
       /*<![CDATA[*/ 
    html {overflow-x:auto; overflow-y:hidden;}
       /*]]>*/
       </style>
    <![endif]-->
    </head><body>
    <div>
    <ul style="list-style-type:decimal">
    <script language=javascript>
    for(i=0;i<500;i++) document.write('<li></li>');
    </script></ul>
    </div>
    <div id="menu">
    <img src="http://www.cnblogs.com/images/cnblogs_com/goodspeed/795/o_o_mylogo.gif" />
    </div>
    </body>
    </html>好象这样子是可以的.
      

  9.   

    可以了，呵呵，大家可以看看这个网页说的很清楚！
    http://www.jluvip.com/blog/article.asp?id=109首页就是那效果
    http://www.jluvip.com/谢谢大家了，非常感谢，结帖！
      

  10.   

    建议用下面的代码更好一些,这样IE5也能用,并且不用加<!DOCTYPE 标记头.
    加了那个东西太不灵活了,连overflow都用不了了.<HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <style type="text/css">
    <!--
    #Layer1 {
    position:absolute;
    left:319px;
    top:57px;
    width:143px;
    height:88px;
    z-index:1;
    border:#FF0000 solid 2px;
    }
    -->
    </style>
    </HEAD><BODY style="overflow-y:hidden;margin:0px;">
    <div id="Layer1">sdfsfsdfsdfsfsfsdfsdfsdfs</div>
    <div style="overflow:auto;height=700;">
    <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/>sdfsdfmargin:0px;<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/>
    </div>
    </BODY>
    </HTML>
      

  11.   

    更正一下:
    <div style="overflow:auto;height=700;">
    ->改为
    <div style="overflow:auto;height=100%;">