父容器未设置border时position:sticky不生效的原因是什么

核心原因是垂直外边距折叠（Margin Collapsing） 导致sticky元素的包含块高度坍缩，元素失去粘性定位必需的滑动空间，和堆叠上下文、滚动区域渲染机制无直接关联。

前置规则说明 #

• position:sticky 生效的必要前提：sticky元素的包含块（即最近的块级父容器）高度必须大于sticky元素自身高度。元素滚动到指定偏移位置后会固定，直到包含块的对侧边缘碰到元素才会随容器滚走；如果包含块高度和sticky元素高度完全一致，元素没有滑动余量，sticky效果不会触发。
• 垂直外边距折叠规则：
  • 没有border/padding/inline内容/高度约束的空块级元素，自身的上下外边距会发生折叠
  • 相邻兄弟块级元素的垂直外边距会发生折叠
  • 没有border/padding阻隔的父子块级元素，垂直外边距会发生折叠，子元素的边距会溢出到父元素外侧
  • 折叠后的边距大小取所有参与折叠边距的最大值

两种场景的具体表现 #

父容器存在border时sticky正常 #

第一个示例中父容器设置了边框：

.container {
  background: lightgray;
  position: relative;
  border: 1px dotted black;
}

button {
  position: sticky;
  top: 0;
}

p {
  margin-bottom: 800px;
}

<div class="container">
  <p></p>
  <p></p>
  <button>Sticky</button>
  <p></p>
  <p></p>
</div>

border会直接阻断父子元素的外边距折叠，所有子元素的边距都被限制在父容器内部。四个空<p>标签的边距经过空元素自折叠、兄弟元素折叠后，最终在button上方、下方各形成800px的合并边距，父容器总高度为800px + button高度 + 800px，远大于button自身高度，button有充足的滑动空间，sticky可正常生效。

父容器移除border后sticky失效 #

第二个示例移除了父容器的border：

.container {
  background: lightgray;
  position: relative;
  border: none;
  /* border changed! */
}

button {
  position: sticky;
  top: 0;
}

p {
  margin-bottom: 800px;
}

<div class="container">
  <p></p>
  <p></p>
  <button>Sticky</button>
  <p></p>
  <p></p>
</div>

此时没有border作为边距阻隔，会发生连锁折叠：

1. 四个空p没有内容、border/padding/高度约束，先发生自身边距折叠，相邻p之间再发生兄弟边距折叠，最终在button上下各形成一个800px的合并边距
2. 父子边距折叠被触发：button上方的800px边距向上穿透父容器顶部，溢出到父容器外侧；button下方的800px边距向下穿透父容器底部，溢出到父容器外侧
3. 最终父容器的内容区域高度仅剩下button自身的高度，和sticky元素高度完全相等，没有任何滑动余量，sticky效果自然无法触发。

快速修复方案 #

不需要保留border也能让sticky生效，任选其一即可：

• 给父容器加任意大小的padding（比如padding-top:1px）阻断边距折叠
• 给父容器设置overflow: hidden/auto创建BFC，阻断边距折叠
• 给空p标签加最小高度、padding或border，阻止空元素的边距自折叠

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