如何不影响下面的布局下css position:fixed固定box元素而不影响其他元素

position:fixed;一般是用来定位头部导航栏,固定头部在最上方的位置,不会因为页面滚动产生影响
fixed是一个绝对定位的元素,是相对于整个浏览器窗口进行定位,相对定位一旦移动就会不占据原来的位置,后面的元素就会向上位移;

解决方法1

在fixed定位的元素最外面一层div,并设置一个相同的宽高(推荐使用)

.left-part-fixed-box{
  min-height: 10vh;
  width: 13.5rem;
  margin-right: 0.5rem;
}
.left-part {
  min-height: 10vh;
  width: 13.5rem;
  border-radius: 0 0.4rem 0.4rem 0;
}

解决方法2

在最外层div设置margin-top或者margin-bottom,与fixed相同的高度就行(二选一就行)

  .nav_headir{
      margin-top: 60px;
      /*margin-bottom: 60px;*/
}

解决办法3

在同一级下增加一个div,并且设置同样的宽高。代码如下

<div class="center">

</div>
 .center{
    width: 100%;
    height: 60px;
}
版权声明:
作者:北忘山
文章:如何不影响下面的布局下css position:fixed固定box元素而不影响其他元素
链接:https://www.beiwangshan.com/archives/238.html
来源:beiwangshan.com
文章版权归作者所有,未经允许请勿转载。
THE END
分享
二维码
打赏
< <上一篇
下一篇>>