数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程语言
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚
法律学习如何使用 CSS 创建一个粘性图片？
在网页上，您可能看到了一个定位在顶部的粘性菜单。有了它，粘性元素也可以置于网页上。此外，使用 position 属性，我们还可以让一张图像变成粘性的，这样的话，即使网页滚动，图像也会始终粘在页面上。让我们看看如何使用 HTML 和 CSS 创建一个粘性图像。
设置图像
使用 <img> 元素在网页上放置一张图片 −
<img src="https://tutorialspoint.com/data_structures_algorithms/images/data-structure-mini-logo.jpg">
添加一些文本，显示滚动条
在图像后放置一些文本，以显示滚动条。我们已经添加了一些随机标题和文本 −
<p>Scroll down to see the effect</p> <h2>With Examples</h2> <h2>With Assignments</h2> <h2>With Codes</h2> <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>
使图像定位为粘性
使用 position 属性，并将其值设置为 sticky，以定位图像。要将其置于顶部，请使用 top 属性，将其值设置为 0
img {
position: sticky;
top: 0;
width: 300px;
height: 300px;
}
示例
以下代码用于创建一张粘性图像 CSS −
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: sticky;
top: 0;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>Data Structures</h1>
<img src="https://tutorialspoint.com/data_structures_algorithms/images/data-structure-mini-logo.jpg">
<p>Scroll down to see the effect</p>
<h2>With Examples</h2>
<h2>With Assignments</h2>
<h2>With Codes</h2>
<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>
更新于:14-12-2023
2K+ 浏览量
广告