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

Posted 2020-08-31 web全端小屋

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了防止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遮挡了。

以上是关于防止fixed元素遮挡其他元素的方法的主要内容，如果未能解决你的问题，请参考以下文章

网站的头部导航条设置了style="position:fixed;height:0px;" 之后，下面的内容就被导航条遮挡住了。

如何错误处理 Selenium 无法单击元素，因为其他元素在 C# 中遮挡了它？ [复制]