为什么粘性定位中的'bottom: 0”表现与预期相反？

粘性定位的意外行为：bottom: 0

在探索CSS位置属性时，开发人员在指定bottom时可能会遇到意外行为： 0 表示粘性定位。根据 MDN 文档，粘性元素最初被视为相对位置元素，直到满足指定的阈值，此时它们会切换到固定定位。然而，当指定了bottom: 0时，会发生相反的行为。

预期行为与实际行为

MDN文档建议具有bottom: 0的元素应该是在视口下方时相对，在视口上方时固定。然而，实际的行为是相反的：元素在视口下方时是固定的，在视口上方时是相对的。

解释

这种差异源于 MDN 文档的措辞。它指出粘性元素在超过阈值之前被视为相对元素，不一定一开始就被视为相对元素。在底部：0的情况下，从一开始就有效地超过了阈值，因为元素开始于视口底部下方。因此，元素开始时是固定的，当滚动超出其起始点时变得相对。

示例插图

考虑以下 HTML 和 CSS 代码：

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

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

在此示例中，元素 A 开始时是相对的，向下滚动时变为固定。另一方面，元素 B 一开始是固定的，向上滚动时变得相对。此行为与上述实际行为一致，其中 Bottom: 0 导致一开始就固定定位。

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