为什么粘性定位的行为与 MDN 文档描述的不同？

仔细检查粘性位置行为的差异

MDN 文档将粘性定位描述为一个属性，该属性将元素从相对位置转换为固定位置一次超过了定义的阈值。然而，在实践中，它的行为有所不同。这种差异源于对这些状态实现顺序的误解。

根据 MDN，粘性位置元素最初的行为类似于相对位置元素，直到超过阈值。然而，在指定了bottom:0的上下文中，在初始状态下已经超过了阈值。结果，元素直接进入其固定位置并保持原样，直到元素的位置距离视口底部超过 0px。

了解粘性位置状态

Position:sticky 有两种不同的状态：

1. 相对状态： 元素的行为类似于相对定位的对象。
2. 固定状态： 元素粘附在视口的固定位置。

初始状态由元素的位置和定义的阈值确定。在bottom:0的情况下，阈值立即被超过，导致初始固定状态。当视口滚动时，元素将保持固定，直到距底部边缘的距离大于 0px。此时，它恢复到其相对状态。

说明行为

考虑以下代码片段：

body {
  height:150vh;
  margin:0;
  display:flex;
  flex-direction:column;
  border:2px solid;
  margin:50px;
}

.b {
  margin-top:auto;
  position:sticky;
  bottom:0;
}

.a {
  position:sticky;
  top:0;
}

<div class="a"> 
  I will start relative then I will be fixed
</div>
<div class="b"> 
  I will start fixed then I will be relative
</div>

top:0 的元素 A 最初将表现为相对行为，并在到达视口顶部时转换为固定。元素 B，底部：0，将立即从固定位置开始，并在距视口底部的距离超过 0px 时过渡到相对位置。

以上是为什么粘性定位的行为与 MDN 文档描述的不同？的详细内容。更多信息请关注PHP中文网其他相关文章！