为什么 `position: Sticky` 和 `bottom: 0` 的行为与 MDN 的描述相反？

position: Sticky with Bottom: 0 的相反行为

当指定position: Sticky with Bottom: 0 时，其行为与定义不同由 MDN 提供。与描述不同的是，元素最初被视为相对定位，直到超过阈值并变得固定，而指定 Bottom: 0 时则相反。

在提供的代码示例中：

<footer>
  <div class="footer"></div>
</footer>

footer {
  position: sticky;
  bottom: 0;
}

MDN 规定页脚元素首先应该相对定位，直到它距离视口底部移动小于 0px。然而，观察到的行为是相反的：

• 向下滚动时： 页脚开始时为固定定位，然后当页脚底部到达距底部 0px 时变为相对定位
• 向上滚动时： 页脚开始时为相对定位，然后在以下情况下变为固定定位页脚底部距离视口底部超过 0px。

相反行为的原因

理解这种行为的关键在于MDN 定义的措辞：“视为相对位置元素直到指定的阈值是超出。”

这意味着初始位置由 HTML 结构和到指定阈值的距离确定。在bottom: 0的情况下，页面加载时页脚已经位于视口的底部。因此，它开始于“固定”状态，因为已经超过了阈值（距离底部 0px）。

结论

因此，在指定位置时： Sticky with Bottom: 0，元素最初将被固定定位，并在元素移过视口底部时过渡到相对位置。此行为与 MDN 文档中描述的行为相反，因为初始位置由 HTML 结构和与指定阈值的接近程度决定。

以上是为什么 `position: Sticky` 和 `bottom: 0` 的行为与 MDN 的描述相反？的详细内容。更多信息请关注PHP中文网其他相关文章！