为何带position: sticky的元素在滚动父元素与自身间有容器时无法粘滞？

问题原因 #

position: sticky 的元素会基于最近的、设置了非visible溢出属性的祖先容器实现粘滞定位。在包含.inner-container的场景中：

• .inner-container作为默认块级元素，宽度被内部1000px的子元素完全撑开，与子元素同宽；
• 滚动容器是.container（设置了overflow-x: auto），但.second的直接父容器是.inner-container，而.inner-container默认overflow: visible，因此.second的粘滞参考对象变为.inner-container；
• 滚动.container时，.inner-container作为整体横向移动，.second相对于.inner-container已经处于左侧（left: 0），自然无法呈现相对.container的粘滞效果。

解决方案 #

以下两种方案均可保留.inner-container并实现粘滞：

方案1：让.inner-container宽度与.container一致 #

通过限制.inner-container的宽度，使.second的粘滞参考对象回到.container：

.container {
  outline: 1px solid black;
  overflow-x: auto;
  width: 400px;
}

.inner-container {
  width: 100%; /* 新增：限制宽度为父容器宽度 */
}

.first,
.third {
  width: 1000px;
  background: #ccc;
}

.second {
  position: sticky;
  left: 0;
  background: #fff; /* 可选：避免被其他元素遮挡 */
}

方案2：让.inner-container成为滚动容器 #

将滚动行为转移到.inner-container内部，使.second相对该容器粘滞：

.container {
  outline: 1px solid black;
  width: 400px;
}

.inner-container {
  width: 100%;
  overflow-x: auto; /* 新增：让内部元素溢出时滚动 */
}

.first,
.third {
  width: 1000px;
  background: #ccc;
}

.second {
  position: sticky;
  left: 0;
  background: #fff; /* 可选：避免被其他元素遮挡 */
}

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