顶部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;
}