为什么我的带有'bottom:0”的粘性元素看起来没有粘住？

理解 CSS 粘性定位及其顶部和底部的行为

CSS 粘性定位允许元素在其包含块中保持固定，直到越过特定的阈值，然后它就变得相对定位。但是，在粘性元素中使用 'bottom: 0' 时似乎存在差异。

问题说明：

考虑以下代码：

<div class="block">
  <div class="move">
  </div>
</div>

.block {
  background: pink;
  width: 50%;
  height: 200px;
}

.move {
  position: sticky;
  bottom: 0;
}

当“move”设置为“top:0”时，粘在粉红色块的顶部，表现如预期。然而，当“move”设置为“bottom:0”时，它似乎变得分离并且不再保持固定。

理解“bottom: 0”与粘性元素的行为：

要理解这种行为，掌握粘性的定义至关重要定位：

A stickily positioned element remains relatively positioned until its containing block crosses a specified threshold (such as setting 'top' to a value other than 'auto'), after which it becomes 'stuck' until meeting the opposite edge of its containing block.

在“bottom: 0”的情况下，粘性元素不可见，因为它粘在其包含块的底部边缘。当滚动位置超过阈值时，包含块向上移动，但粘性元素保持固定在底部边缘。由于粘性元素已经位于底部，因此它无法进一步向上移动。

要观察粘性行为，请确保包含块有足够的高度来容纳粘性元素。通过为块元素提供显着的上边距，您可以滚动页面并看到粘性元素粘附在底部

以上是为什么我的带有'bottom:0”的粘性元素看起来没有粘住？的详细内容。更多信息请关注PHP中文网其他相关文章！