解决头部使用 position:fixed； 固定定位后遮住下方内容的问题

1.在头部下面给一个空的 div

给这个div设置高度，把页面撑开，这种方法是让头部刚好遮住的是这个空div，把内容放出来。

但是这种方法需要一点点调试高度，所以不推荐。

2.把整个要使用 position:fixed; 的盒子，用另一个盒子包起来

比如说我有一个头部区域，需要固定

 <div class="head">
    <span class="iconfont icon-shouyeshouye"></span>
    <h1>演出列表</h1>
</div>

.head{
    width: 100%;
    height: 55px;
    position: fixed;
}

这时候再向下写内容就会被头部遮住一部分，因为整个头部的高度为 55px ，所以用一个盒子把整个头部包起来，设置等高，就可以解决了

<div class="box">
      <div class="head">
            <span class="iconfont icon-shouyeshouye"></span>
            <h1>演出列表</h1>
       </div>
</div>

.box{
    height: 55px;
}

 

原文链接：https://blog.csdn.net/lolhuxiaotian/article/details/122229393