粘滞图像
创建于 2024-12-03 /
25
字体:
[默认]
[大]
[更大]
了解如何使用 CSS 创建粘滞图片。
粘滞图片
注释:此示例不适用于 Internet Explorer 或 Edge 15 及更早版本。
粘滞图片
实例
img.sticky {position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
} 亲自试一试 »
position:sticky;
的元素是根据用户的滚动位置来定位的。
粘性元素在 relative
和 fixed
之间切换,具体取决于滚动位置。 它是相对定位的,直到在视口中遇到给定的偏移位置 - 然后它"粘"在适当的位置(如 position:fixed)。
注意:Internet Explorer、Edge 15 及更早版本不支持粘性定位。 Safari 需要 -webkit- 前缀(参见下面的示例)。 您还必须至少指定 top
、right
、bottom
或 left
之一用于粘性定位。
要了解有关 CSS 定位的更多信息,请阅读我们的 CSS 定位 教程。
要详细了解如何设置图片样式,请阅读我们的CSS 图片教程。
0 人点赞过