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元素中。

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

语法

用户可以按照下面的语法使用position:fixedCSS属性。

Position:fixed;

示例1

在下面的示例中，我们有一个可滚动的div元素，其中包含有关CSS的文本。我们还添加了Facebook图标。对于图像，我们设置了固定位置，并使用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>使用CSS中的`position:fixed`设置HTML元素的固定位置</h3>
   <div class="text">
      CSS是用于样式表的语言，用于定义文档（通常为HTML）的呈现方式。CSS与HTML和JavaScript一起是互联网的重要技术。
      <img src="https://png.pngtree.com/png-vector/20221018/ourmid/pngtree-facebook-social-media-icon-png-image_6315968.png" alt="Facebook图标">
   </div>
</body>
</html>

什么是CSS中的position:sticky？

position:sticky与position:fixed几乎相似，但有一点区别。无论如何，只要我们将sticky位置应用于HTML元素，它就会根据父元素而不是与视口类似的位置设置固定位置。

因此，当我们滚动父元素时，具有sticky位置的HTML元素到达偏移量时会变为固定。

语法

用户可以按照下面的语法在CSS中使用position:sticky。

position:sticky;

示例2

在下面的示例中，我们添加了一些div元素文本。然后，我们添加了Facebook图标，然后再次添加了文本。我们的div元素是可滚动的，我们为图像元素设置了一个sticky位置。

在输出中，用户可以观察到，当他们滚动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>使用CSS中的`position:sticky`设置HTML元素的固定位置</h2>
   <div class="text">
      此文本位于图像上方。此文本位于图像上方。此文本位于图像上方<br>
      <img src="https://png.pngtree.com/png-vector/20221018/ourmid/pngtree-facebook-social-media-icon-png-image_6315968.png" alt="Facebook图标">
      此文本位于图像下方。此文本位于图像下方。此文本位于图像下方。
   </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>在CSS中使用`position:sticky和position:fixed`</h2>
   <div class="parent">
      自然是物质世界中的一切，包括植物、动物、景观和自然现象。
      它是美丽、灵感和奇迹的源泉，并为我们生存提供重要资源。
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5E6WD3gFcs5kuTU6SX7VHO3YfghVscOwxOxdzEmrvfg&s"
      alt="大自然">
      尽管它的力量和多样性是巨大的，但自然也是脆弱的，需要仔细的管理，以确保其持续的健康和可持续性。
   </div><br>
   <button onclick="setSticky()">设置粘性</button><br><br>
   <button onclick="setFixed()">设置固定</button>
   <script>
      function setSticky() {
         document.querySelector("img").style.position = "sticky";
      }
      function setFixed() {
         document.querySelector("img").style.position = "fixed";
      }
   </script>
</body>
</html>