滚动条被固定定位覆盖问题故事源于我自己想手写一个整体布局，并不想使用ui库的布局容器，那么就动手开始，新建一个html

故事源于我自己想手写一个整体布局，并不想使用ui库的布局容器，那么就动手开始，新建一个html文件，布局采用宽高 100% 百分比的宽高在项目后续适配会简单不少，

新建 html页面 html，body设置为100%

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <style>
      html,
      body {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div>111</div>
  </body>
</html>

第一个问题出来了，当html 和body 设置为100% 浏览器滚动条自动出现，xy轴均有，审查元素 body自带8px的margin

解决办法 body{margin:0}

继续我们的布局

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <style>
      html,
      body {
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
      }
      .content {
        width: 100%;
        height: 100%;
      }
      .header {
        width: 100%;
        height: 56px;
        background-color: aqua;
        position: fixed;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="header"></div>
      <div>
        <h1>11111111111</h1>
        <h1>11111111111</h1>
        <h1>11111111111</h1>
        <h1>11111111111</h1>
        <h1>11111111111</h1>
        <h1>11111111111</h1>
        <h1>11111111111</h1>
        <h1>11111111111</h1>
        <h1>11111111111</h1>
        <h1>11111111111</h1>
        <h1>11111111111</h1>
        <h1>11111111111</h1>
      </div>
    </div>
  </body>
</html>

第二个问题又出来了，盒子内容高度超过时 XY轴滚动条自动出现切宽高有超出

Y轴滚动条出现合理但X轴不合理
解决： body {overflow-x: hidden;}

第三个问题出现滚动条被覆盖

解决： header{z-index: -1}

完整代码如下

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <style>
      html,
      body {
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
      }
      .content {
        position: relative;
        width: 100%;
        z-index: -1;
      }
      .header {
        width: 100%;
        height: 56px;
        background-color: aqua;
        position: fixed;
        top: 0;
        left: 0;
      }
      .main {
        margin-top: 56px;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="header"></div>
      <div class="main">
        <h1>11111111111</h1>
        <h1>11111111111</h1>
        <h1>11111111111</h1>
        <h1>11111111111</h1>
        <h1>11111111111</h1>
        <h1>11111111111</h1>
        <h1>11111111111</h1>
        <h1>11111111111</h1>
        <h1>11111111111</h1>
        <h1>11111111111</h1>
        <h1>11111111111</h1>
        <h1>11111111111</h1>
        <h1>11111111111</h1>
        <h1>11111111111</h1>
        <h1>11111111111</h1>
        <h1>11111111111</h1>
      </div>
    </div>
  </body>
</html>

这是个很小的问题，我百度了一天也没解决，最后自己不停的尝试 css 总算倒腾出来了，希望能帮到你