使用position: fixed固定元素时，滚动页面元素未保持固定的问题

类名为.it的元素设置position: fixed属性后，无法固定在屏幕上，向下滚动页面时元素会随页面上移。

相关代码 #

CSS #

.it {
  display: inline;
  cursor: default;
  position: fixed;
  top: 50px;
  opacity: 0;
  z-index: 9999;
}

HTML #

<div id="scroll">
  <p class="it" id="hst">Home</p>
  <p class="it" id="ft">Friends</p>
  <p class="it" id="pt">Profile</p>
  <p class="it" id="nt">Notifications</p>
</div>

问题根源是固定定位元素的父容器#scroll可能设置了transform、perspective或filter属性——当父元素存在这类属性时，position: fixed的元素会以该父元素为定位基准，而非浏览器视口，导致滚动时跟着父容器移动。

解决方法：

• 检查#scroll的CSS样式，移除transform、perspective、filter相关属性；
• 若父容器必须保留这些属性，将.it元素从#scroll中移出，直接放在<body>或其他无上述属性的父级元素下；
• 额外排查：确认.it的父级没有设置overflow: scroll或overflow: auto，这类属性也可能干扰固定定位的表现。

调整后的示例HTML：

<p class="it" id="hst">Home</p>
<p class="it" id="ft">Friends</p>
<p class="it" id="pt">Profile</p>
<p class="it" id="nt">Notifications</p>

<div id="scroll">
  <!-- 原容器内的其他内容 -->
</div>

内容的提问来源于stack exchange，提问作者user21632495