如何 - 粘性图片

了解如何使用 CSS 创建粘性图片。

粘性图片

笔记：此示例不适用于 Internet Explorer 或 Edge 15 及更早版本。

img.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}

一个元素与position: sticky;根据用户的滚动位置定位。

粘性元素在之间切换relative和fixed，取决于滚动位置。它是相对定位的，直到在视口中满足给定的偏移位置 - 然后它"sticks"就位（如position:fixed）。

笔记：Internet Explorer、Edge 15 及更早版本不支持粘性定位。 Safari 需要 -webkit- 前缀（请参见下面的示例）。您还必须至少指定以下一项top,right,bottom或者left以便粘性定位发挥作用。

要了解有关 CSS 定位的更多信息，请阅读我们的CSS 位置教程。

要了解有关如何设置图片样式的更多信息，请阅读我们的CSS 图片教程。