为什么'bottom: 0”的粘性定位与 MDN 文档相比表现出相反的行为？

了解粘性定位的相反行为

在 MDN 文档中，粘性定位被描述为相对定位和固定定位的混合，其中元素的行为类似于相对定位的元素，直到超过阈值，之后它表现为固定位置元素。然而，当为粘性定位指定bottom: 0时，行为似乎相反。

粘性定位的机制

根据MDN，粘性位置元素与两种状态：

1. 相对模式： 元素相对于其容器或静态父元素的流定位。
2. 固定模式： 元素相对于视口定位，保持在固定位置。

当指定的阈值达到时，这些状态之间的转换就会发生

场景说明

考虑以下示例：

<div class="container">
  <header></header>
  <main></main>
  <footer>
    <div class="footer"></div>
  </footer>
</div>

body {
  margin: 0;
}

.container {
  display: flex;
  height: 100vh;
}

.container>* {
  width: 100%;
}

footer {
  background: #faa;
  position: sticky;
  bottom: 0;
}

.footer {
  background: #aff;
  height: 100vh;
}

当为页脚元素指定 Bottom: 0 时，它最初以固定状态启动，因为从一开始就超过了阈值（视口的底部）。向下滚动时，仍然超过阈值，因此页脚保持在固定位置。

但是，当页脚元素到达阈值（视口底部）时，它会转换为相对模式，因为不再超过阈值。这与 MDN 文档的建议相反，MDN 文档指出当元素距离视口底部小于 0 像素时应该发生转换。

语言误解

歧义源于 MDN 文档中使用的语言。 “直到超过阈值”的说法意味着相对状态是粘性定位的起始状态。然而，情况并非总是如此。如果元素在声明为粘性时已经超过阈值，则它将开始处于固定状态。

结论

了解粘性定位的两种状态以及何时转换它们之间发生的情况对于有效使用它至关重要。当最初超过阈值时，MDN 文档中描述的行为可以逆转，从而导致与预期不同的行为。

以上是为什么'bottom: 0”的粘性定位与 MDN 文档相比表现出相反的行为？的详细内容。更多信息请关注PHP中文网其他相关文章！