设置position:sticky且top:0的元素为何与父元素顶部存在窄间隙？

问题成因 #

当祖先容器使用transform: scale时，会创建新的堆叠上下文和包含块，直接干扰position: sticky元素的定位计算逻辑。另外，缩放操作涉及浮点运算，浏览器渲染时的像素对齐精度偏差会被放大，导致sticky元素和父容器顶部出现像素级的间隙——尤其是缩放比例非100%时，这种误差会直接显现出来。

修复方法 #

提供三个实用方案，按需选择：

方案1：微调sticky元素的top值 #

直接将top: 0改为top: -1px，用极小的负数偏移抵消间隙，完全不影响正常视觉效果：

.container .test-header {
  text-align: center;
  background-color: pink;
  margin: 0;
  position: sticky;
  top: -1px; /* 替换原top: 0 */
}

方案2：用背景色覆盖间隙 #

给sticky元素添加与自身背景色一致的顶部边框，直接盖住间隙：

.container .test-header {
  text-align: center;
  background-color: pink;
  margin: 0;
  position: sticky;
  top: 0;
  border-top: 1px solid pink; /* 添加同色边框 */
}

方案3：调整transform的应用层级（根源解决） #

把transform: scale从外层.container移到.test-container上，避免影响sticky元素的包含块上下文：

.container {
  width: 100%;
  height: 100%;
  background-color: orange;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 移除此处的transform: scale(0.9) */
}
.container .test-container {
  width: 80%;
  height: 500px;
  background-color: aqua;
  overflow: auto;
  transform: scale(0.9); /* 移至此处 */
  transform-origin: center; /* 保持居中对齐 */
}

这个方案从根源上消除了transform对sticky定位的干扰，是最推荐的长期解决方案。

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