数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法学研究CSS 中的 `position: sticky` 和 `position: fixed` 有什么区别？
在 CSS 中，`position` 属性用于设置 HTML 元素在视口中的位置。它可以取值如 `fixed`、`sticky`、`static`、`absolute`、`relative` 等。
在本教程中，我们将学习 `position: fixed` 和 `position: sticky` 之间的区别。
什么是 CSS 中的 `position: fixed`？
`position` 属性的 `fixed` 值用于将任何元素设置在 HTML 视口中固定位置。当我们为任何 HTML 元素设置固定位置时，它会脱离文档流。它根据视口设置位置，即使我们将 HTML 元素添加到网页底部 div 元素的内部。
此外，开发人员可以使用 `top`、`left`、`bottom` 和 `right` CSS 属性，结合 `position: fixed` 来设置 HTML 元素相对于视口的位置。
语法
用户可以按照以下语法使用 `position: fixed` CSS 属性。
Position: fixed;
示例 1
在下面的示例中，我们有一个可滚动的 div 元素，其中包含关于 CSS 的文本。我们还在 div 元素中添加了 Facebook 图标。对于图像，我们设置了 `fixed` 位置并使用 `top` 和 `left` 属性来设置顶部和左侧位置。
在输出中，用户可以看到 Facebook 图标的固定位置。
<html>
<head>
<style>
.text {
width: 500px;
height: 200px;
overflow: auto;
background-color: aqua;
font-size: 1.25rem;
}
img {
position: fixed;
left: 20px;
top: 130px;
height: 70px;
width: 70px;
}
</style>
</head>
<body>
<h3>Using the <i> position: fixed </i> in CSS to set a fixed position for an HTML element</h3>
<div class = "text">
CSS is a language for style sheets that are utilized to define how a document, typically in HTML, should be presented. CSS, alongside HTML and JavaScript, is a vital technology for the World Wide Web.
<img src = "https://png.pngtree.com/png-vector/20221018/ourmid/pngtree-facebook-social-media-icon-png-image_6315968.png" alt = "Facebook icon">
</div>
</body>
</html>
什么是 CSS 中的 `position: sticky`？
`position: sticky` 与 `position: fixed` 非常相似，但有一点细微的差别。当我们将 `sticky` 位置应用于 HTML 元素时，它根据父元素设置固定位置，而不是像 `fixed` 位置那样相对于视口设置位置。
因此，当我们滚动父元素并且具有 `sticky` 位置的 HTML 元素达到偏移量时，它就会固定。
语法
用户可以按照以下语法在 CSS 中使用 `position: sticky`。
position: sticky
示例 2
在下面的示例中，我们添加了一些 div 元素文本。之后，我们添加了 Facebook 图标，然后再次添加了文本。我们的 div 元素是可滚动的，我们为图像元素设置了 `sticky` 位置。
在输出中，用户可以观察到，当他们滚动 div 元素并且图像距离 div 元素顶部 30 像素时，它会固定。
<html>
<head>
<style>
.text {
width: 500px;
height: 200px;
overflow: auto;
background-color: pink;
font-size: 1.4rem;
}
img {
position: sticky;
left: 0px;
top: 30px;
height: 70px;
width: 70px;
}
</style>
</head>
<body>
<h2>Using the <i> position: sticky </i> in CSS to set a sticky position for an HTML element</h2>
<div class = "text">
This text is above the image. This text is above the image. This text is above the image <br>
<img src = "https://png.pngtree.com/png-vector/20221018/ourmid/pngtree-facebook-social-media-icon-png-image_6315968.png" alt = "Facebook icon">
This text is below the image. This text is below the image. This text is below the image.
</div>
</body>
</html>
`position: fixed` 和 `position: sticky` 之间有什么区别？
以下是 `position: fixed` 和 `position: sticky` 的区别表。
| 属性 | `position: fixed` | `position: sticky` |
|---|---|---|
| 元素位置 | 它根据 HTML 视口设置元素位置。 | 它根据父元素设置元素位置。 |
| 滚动位置 | 即使我们滚动或不滚动文档，它也始终保持固定。 | 只有当元素在滚动父元素时达到偏移量时，它才会固定。 |
| 覆盖其他元素 | 它始终覆盖其他元素。 | 当元素达到偏移量并固定时，它才会覆盖其他元素。 |
| 浏览器支持 | 所有浏览器都支持它。 | 只有现代浏览器支持它。 |
| 用途 | 固定位置的一种用例是在侧边栏中添加社交媒体图标。 | 它可以用来显示粘性广告。 |
示例 3
在下面的示例中，当用户点击“设置粘性”按钮时，它会为图像设置粘性位置；当用户点击“设置固定”按钮时，它会为图像元素设置固定位置。
在输出中，用户可以通过点击按钮更改位置来观察固定位置和粘性位置之间的区别。
<html>
<head>
<style>
.parent {
width: 400px;
height: 300px;
overflow: auto;
background-color: green;
color: white;
font-size: 2rem;
}
img {
position: fixed;
left: 0px;
top: 50px;
height: 70px;
width: 70px;
}
</style>
</head>
<body>
<h2>Using the <i> position: sitcky and postion: fixed </i> in CSS</h2>
<div class = "parent">
Nature is the physical world and everything in it, including plants, animals, landscapes, and natural phenomena.
It is a source of beauty, inspiration, and wonder, and provides vital resources for our survival.
<img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5E6WD3gFcs5kuTU6SX7VHO3YfghVscOwxOxdzEmrvfg&s"
alt = "Nature">
Despite its immense power and diversity, nature is also fragile and requires careful stewardship to ensure its continued health and sustainability.
</div><br>
<button onclick = "setSticky()"> set sticky </button> <br> <br>
<button onclick = "setFixed()"> set fixed </button>
<script>
function setSticky() {
document.querySelector("img").style.position = "sticky";
}
function setFixed() {
document.querySelector("img").style.position = "fixed";
}
</script>
</body>
</html>
用户学习了 `position: fixed` 和 `position: sticky` 之间的区别。主要区别在于，`fixed` 位置根据视口设置 HTML 元素的位置，而 `sticky` 位置根据父元素设置位置。
12K+ 次浏览
