顶部fixed固定条遮挡下边文案

最新推荐文章于 2024-08-08 11:42:47 发布

屠苏V

最新推荐文章于 2024-08-08 11:42:47 发布

阅读量3.7k

点赞数 3

分类专栏： css 文章标签：顶部固定遮挡 padding

本文链接：https://blog.csdn.net/weixin_37894619/article/details/64919046

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

顶部fixed固定条遮挡下边文案

当顶部出现固定条之后最让人头疼的问题就是会遮挡下面的内容，一般的解决办法就是给最外边的容器加padding-top，但是这非常不灵活，因为你不知道什么时候需要加顶部固定条，而且高度也不确定。有的时候加个类名区分，没有的时候去掉，这就要经常跟后端沟通，十分麻烦，今天想到而一个绝佳的好办法！是什么呢？就是给这个需要固定的条加一个父容器，并且给这个父容器设置高为固定条的高度，这样就比较灵活啦！

<div class="header-banWrap">
                <div class="head-openApp fixed-top">
                    <a class="btn btn-primary1 btn-open fr" href="javascript:;">打开APP</a>
                    <a class="logo1 inl-b" href=""></a>
                </div>
            </div>

.fixed-top {
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 640px;
    z-index: 9;
    border-bottom: 1px solid #e8e8e8;
}

.header-banWrap {
    height: 60px;
}

.head-openApp {
    padding: 8px 10px;
    background: #fff;
}

.head-openApp .logo1 {
    background: url("img/common/logo_big.png?v=#{$getTs}") no-repeat;
    background-size: 165px;
    width: 165px;
    height: 44px;
}

.head-openApp .btn-open {
    padding: 6px 21px;
    font-size: 14px;
    margin-top: 2px;
}