CSS position:sticky 属性不生效问题排查求助

问题分析与修复步骤： #

• 移除子元素的粘性定位：你同时给父元素<ul class="link">和子元素<li>设置了position:sticky，这会造成定位规则冲突，子元素的粘性会干扰父容器的表现。只需要保留父容器的position:sticky即可。
• 修正CSS语法错误：.link类中的margin:10缺少长度单位，应改为margin:10px。虽然这不是sticky失效的直接原因，但不符合CSS规范，可能引发其他布局异常。
• 检查父容器的overflow属性：如果当前页面中<ul class="link">的父级元素设置了overflow:hidden、overflow:auto或overflow:scroll，会破坏sticky的定位逻辑——sticky需要依赖最近的、未设置overflow裁剪的滚动祖先元素。请确认ul的所有父容器都没有这类属性（除非是刻意设置的滚动容器）。

修正后的CSS代码 #

body {
  min-height: 200vh;
}
.link {
  background-color: white;
  list-style-type: none;
  text-align: center;
  padding: 0;
  margin: 10px;
  position: sticky;
  top: 10px;
}

.link li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}

对应的HTML代码 #

<ul class="link">
  <li><a href="https://www." style="color:black;">Home</a></li>
  <li><a href="https://services." style="color:black;">Services</a></li>
  <li><a href="https://contact." style="color:black;">Contact</a></li>
</ul>

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