无法实现CSS粘性定位（sticky）效果问题求助

问题背景 #

我尝试实现页面元素滚动时固定在顶部的效果，编写了以下CSS代码：

.stick-to-top {
  background-color: yellow;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

对应的HTML结构如下：

<div class="stick-to-top">
Can not make this text stick<br>
Can not make this text stick<br>
Can not make this text stick<br>
Can not make this text stick<br>
Can not make this text stick<br>
Can not make this text stick<br>
Can not make this text stick<br>
</div>
<div style="background-color:red; position: -webkit-sticky;  position: sticky;  top: 250px;">
Can not make this text stick<br>
Can not make this text stick<br>
Can not make this text stick<br>
Can not make this text stick<br>
Can not make this text stick<br>
Can not make this text stick<br>
Can not make this text stick<br>
</div>
<br><hr><br><br><hr><br><br><hr><br><br><hr><br><br><hr><br><br><hr><br><br><hr><br><br><hr><br><br><hr><br><br><hr>
<br><hr><br><br><hr><br><br><hr><br><br><hr><br><br><hr><br><br><hr><br><br><hr><br><br><hr><br><br><hr><br><br><hr>
<br><hr><br><br><hr><br><br><hr><br><br><hr><br><br><hr><br><br><hr><br><br><hr><br><br><hr><br><br><hr><br><br><hr>
<br><hr><br><br><hr><br><br><hr><br><br><hr><br><br><hr><br><br><hr><br><br><hr><br><br><hr><br><br><hr><br><br><hr>
END of page

这段代码在在线编辑器中可以正常运行，但在我自己的网页中完全没有效果。网页已有大量样式，通过浏览器检查工具查看目标元素的计算样式，确认position: sticky和top: 0已生效，尝试用all: revert/all: none/all: unset清除样式也没用，不知道该怎么继续排查。

核心排查方向 #

• 检查所有父元素的溢出设置：position: sticky的生效依赖于正确的滚动上下文，如果任何一个祖先元素设置了overflow: hidden/auto/scroll，都会破坏sticky的定位逻辑，导致元素无法固定。必须逐个排查目标元素的所有父级、祖父级元素，移除这类溢出设置（如果不影响其他布局的话）。
• 确认父元素的高度范围：如果父元素的高度小于等于sticky元素的高度，元素没有滚动“空间”触发固定效果，自然不会生效。检查父元素的高度计算值，确保它有足够的滚动空间。
• 排查布局容器的冲突：如果页面使用了Flex或Grid布局，父容器的align-items、justify-content等属性可能改变元素的定位行为。在Flex布局下，给sticky元素添加align-self: flex-start，强制元素保持在容器顶部，避免被布局属性拉伸。
• 验证定位层级：如果有其他高z-index的元素覆盖了sticky元素，会导致视觉上看起来没生效。给sticky元素添加z-index: 999（或更高值），确保它能显示在其他元素上方。
• 检查父元素的定位属性：如果父元素设置了position: relative/absolute/fixed，可能会改变sticky元素的包含块，导致定位失效。尝试移除父元素的定位属性，或者调整嵌套结构。

快速测试方案 #

把sticky元素直接放到<body>标签下，脱离原有嵌套结构，测试是否能正常固定。如果生效，说明问题出在原有嵌套的父元素上；如果还是失效，再检查全局样式中是否有body或html的溢出、高度设置（比如html, body { height: 100%; overflow: hidden; }这类设置会破坏页面滚动）。

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