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

最新推荐文章于 2023-08-29 14:37:30 发布

weixin_30416497

最新推荐文章于 2023-08-29 14:37:30 发布

阅读量1.4k

点赞数

原文链接：http://www.cnblogs.com/jewave/p/6418941.html

版权

有多个页面，有的有固定的头部(设置了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遮挡了。

转载于:https://www.cnblogs.com/jewave/p/6418941.html

weixin_30416497

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防止fixed元素遮挡其他元素的方法

有多个页面，有的有固定的头部(设置了postion:fixed的元素)，有的没有固定的头部，这时就有个问题，有固定头部的页面，头部会遮挡下面的内容，那怎么解决呢？<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-U...
复制链接

扫一扫