使用position: fixed时保持宽度

  • 本文关键字:position fixed 使用 css
  • 更新时间 :
  • 英文 :


我试图找出如何保持一个div的宽度时使用位置固定,固定的div有一个额外的宽度

.col-1 {
background-color: blue;
height: 58px;
border-radius: 12px;
}
.fixed {
z-index: 9999;
position: fixed;
background-color: red;
margin-top: 100px;
width: 100%;
}
<div class="col-1">Test</div>
<div class="col-1 fixed">Test</div>

您可以将left: 0;right: 0;添加到.fixeddiv中以实现100%的宽度

.fixed {
z-index: 9999;
position: fixed;
background-color: red;
margin-top: 100px;
width: 100%;
left: 0;
right: 0;
}

这看起来不完全一样,因为第一个div有margin应用到它来自<body>,给它你看到它周围的空白。我建议使用重置来删除该边距以获得相同的宽度。

一个例子:

body {
margin: 0;
}

当然,如果你想在那里设置边距,你可以设置leftright来匹配它,在这个例子中是8px

最新更新