如何使用 CSS 创建粘性图片?

cssweb developmentfront end technology更新于 2025/10/4 22:36:17

以下是使用 CSS 创建粘性图片的代码 −

示例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
   position: sticky;
   top: 0;
   width: 300px;
   height: 300px;
}
</style>
</head>
<body>
<h1>Some header text</h1>
<img src="https://i.picsum.photos/id/721/400/400.jpg">
<h1>Some header text</h1>
<h1>Some header text</h1>
<h1>Some header text</h1>
<p style="font-size: 40px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat odio ratione officia quod qui blanditiis animi! Repudiandae culpa recusandae dolor id soluta porro commodi quidem, incidunt voluptatum vitae similique nesciunt obcaecati odit enim repellat doloribus. Explicabo quisquam in beatae earum?</p>
</body>
</html>