css - 位置固定不起作用就像绝对一样

Question

<分区>

Answer 1

这里的问题在于您的 .content-container 包装器类，它具有 webkit-transform: translate3d(0,0,0) 的 CSS 声明。转换声明，如 this answer illustrates , 将定位上下文从视口(viewport)更改为旋转元素，这实际上意味着您的 fixed 元素的行为就好像它是绝对定位的一样。下面的示例显示了转换后的 div 内的固定元素与该 div 外的固定元素之间的区别。

.rotate {
  transform: rotate(30deg);
  background: blue;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}
.fixed {
  position: fixed;
  background: red;
  padding: 10px;
  color: white;
  top: 50px;
}

<div class="rotate">
  <div class="fixed"> I am fixed inside a rotated div.</div>
</div>
<div class="fixed"> I am fixed outside a rotated div.</div>

为了一切正常，您需要从 .content-container 中删除 transform3d 声明。