防止fixed元素遮挡其他元素的方法

有多个页面，有的有固定的头部(设置了postion:fixed的元素)，有的没有固定的头部，这时就有个问题，有固定头部的页面，头部会遮挡下面的内容，那怎么解决呢？

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>防止fixed元素遮挡其他元素的方法</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        height: 3333px;
    }

    .fixedtop {
        margin-top: 50px;
    }

    .fixedtop header {
        position: fixed;
        left: 0;
        top: 0;
        height: 50px;
        overflow: hidden;
        width: 100%;
        background: blue;
    }

    .fixedbottom {
        margin-bottom:50px;
    }

    .fixedbottom footer {
        position: fixed;
        left: 0;
        bottom: 0;
        height: 50px;
        overflow: hidden;
        width: 100%;
        background: blue;
    }

    </style>
</head>

<body>
    <div class="fixedtop">
        <header></header>
    </div>
    <h1>1</h1>
    <p>222</p>
    <pre>
        33
            test
    </pre>


    <div class="fixedbottom">
        <footer></footer>
    </div>
</body>

</html>

这样,头部下面的元素h1不用额外设置margin-top，而且由于header外层新增了div.fixedtop,从而实现h1不会被header遮挡了。

posted @ 2017-02-20 12:15  web全端小屋  阅读(16550)  评论(0)  编辑  收藏  举报