为什么 `bottom:0` 没有让我的 `position:sticky` 元素立即粘住？

为什么“bottom:0”似乎不适用于 Position:Sticky

当尝试将“bottom:0”与“position:sticky”，最初可能会出现该元素没有变得粘性的情况。然而，事实并非如此。为了理解这种行为，让我们检查一下“sticky”的定义。

根据 CSS 规范，具有“position:sticky”的元素保持相对定位，直到其包含块跨越阈值。在这种情况下，包含块是粉红色的“块”元素。

设置“bottom:0”时，当包含块的底部在浏览器窗口中可见时，“移动”元素将变得粘性。但是，在您的测试代码中，“block”元素的高度为 200px，“move”元素放置在其中。这意味着默认情况下，“移动”元素已经位于其包含块内可见区域的底部。因此，它永远不会遇到粘性所需的阈值。

为了演示“bottom:0”如何与“position:sticky”配合使用，我们可以为“block”元素提供较大的边距，移动它从屏幕上消失了。一旦我们开始滚动，我们可以观察到当“block”元素滚动经过浏览器窗口顶部时，“move”元素开始粘在可见屏幕的底部。

以上是为什么 `bottom:0` 没有让我的 `position:sticky` 元素立即粘住？的详细内容。更多信息请关注PHP中文网其他相关文章！