【求助】怎么像百度一样(如图)，让一个div固定在顶端，其他div在滚动到顶端时，内容被这个div覆盖？

百度div固定

解决方案 »

  1.   

    #top 固定定位...#top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    ....
    }
      

  2.   

    我记得好像这个可以：重叠顺序样式z-index,   将#top设置为第一层，内容设置为第二层#top {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index:1;
        ....   
    }
      

  3.   


    这样不行的，这个只是把#top固定在了顶端，但是当#middle有内容时，你滑动滚动条会发现，#middle的内容与#top的内容重叠，模糊不清，而不是像百度那样，#middle的内容被#top“收到”下面去了
      

  4.   


    即使设置了z-index，还是不行，这个只是把#top固定在了顶端，但是当#middle有内容时，你滑动滚动条会发现，#middle的内容与#top的内容重叠，模糊不清，而不是像百度那样。
    我觉得应该用js来做，不过不知道怎么弄
      

  5.   

    因为你 #top 背景默认是透明的，当然会重叠。给 #top 添加白色背景色，就可以了。<!DOCTYPE html>
    <html>
    <head>
        <title>test</title>
        <style>
    body {
    margin: 0;
    padding: 0;}
    .head {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: #FFF;
    }
    .body {
    margin-top: 50px;
    height: 1000px;
    background: #CCC;
    }
    .footer {
    background-color: #333; 
    }
        </style>
    </head>
    <body>
        <div class="head">head</div>
        <div class="body">
            <p>body</p>
            <p>body</p>
            <p>body</p>
            <p>body</p>
            <p>body</p>
        </div>
        <div class="footer">footer</div>
    </body>
    </html>
      

  6.   

    当滚动的位置大于top的高度时设置top的position为fixed  小于时恢复最开始的布局 试试
      

  7.   

    因为你 #top 背景默认是透明的，当然会重叠。给 #top 添加白色背景色，就可以了。<!DOCTYPE html>
    <html>
    <head>
        <title>test</title>
        <style>
    body {
    margin: 0;
    padding: 0;}
    .head {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: #FFF;
    }
    .body {
    margin-top: 50px;
    height: 1000px;
    background: #CCC;
    }
    .footer {
    background-color: #333; 
    }
        </style>
    </head>
    <body>
        <div class="head">head</div>
        <div class="body">
            <p>body</p>
            <p>body</p>
            <p>body</p>
            <p>body</p>
            <p>body</p>
        </div>
        <div class="footer">footer</div>
    </body>
    </html>
    确实是这样的，是我自己疏忽了