CSS 中position:sticky和position:fixed有什么区别?

cssweb developmentfront end technology更新于 2024/4/30 8:12:17

在CSS中，"position"属性用于设置HTML元素在视口中的位置。它可以具有"fixed"、"sticky"、"static"、"absolute"、"relative"等值。

在本教程中，我们将学习"position:fixed"和"position:sticky"之间的区别。

CSS中Position:Fixed是什么?

position属性的"fixed"值用于将任何元素设置在HTML视口中的固定位置。每当我们为任何HTML元素设置固定位置时，它都会脱离文档流。即使我们将 HTML 元素添加到网页底部的 div 元素中，它也会根据视口设置位置。

此外，开发者还可以使用 CSS 属性"top"、"left"、"bottom"和"right"，并在使用"position:fixed"时设置 HTML 元素相对于视口的位置。

语法

用户可以按照以下语法使用 CSS 属性"position:fixed"。

Position:fixed;

示例 1

在下面的示例中，我们有一个可滚动的 div 元素，其中包含有关 CSS 的文本。我们还在 div 元素中添加了 Facebook 图标。对于图像，我们设置了"固定"位置，并使用"顶部"和"左侧"属性设置顶部和左侧位置。

在输出中，用户可以观察到 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 元素是可滚动的，并且我们为图像元素设置了"粘性"位置。

在输出中，用户可以观察到，当他们滚动 div 元素并且图像到达距 div 元素顶部 30px 的位置时，它变为固定状态。

<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"位置根据父元素设置位置。