position: fixed 定位后脱离文档流

963 阅读1分钟

当使用position: fixed; 定位 后会造成高度崩塌,下面的元素会挤上来

可以在使用定位的元素最外面定义一个盒子包住他给他宽度高度,这样元素就不会挤上来了

.box{
  height: 1rem;
  width: 100vw;
  background-color: white;
  
      .header-box { // 定位的元素
      padding: .2rem;
      background-color: white;
      box-sizing: border-box;
      position: fixed;  // 定位
      width: 100%;
      top: 0;
     }
}

底部固定 遮住上方的元素可以为上面的元素添加padding-bottom 或者 margin-bottom