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

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

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

Position: Fixed在CSS中是什么

‘position’属性的’fixed’值用于将任何元素设置为HTML视口中的固定位置。当我们为任何HTML元素设置了固定位置时，它会脱离文档流。它基于视口设置位置，即使我们在网页底部的div元素内添加了HTML元素。

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

语法

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

Position: fixed;

示例1

在下面的示例中，我们有一个包含关于 CSS 的可滚动的 div 元素。我们还将 Facebook 图标添加到 div 元素中。对于图片，我们设置了“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’相似，但存在一小差异。每当我们对HTML元素应用‘sticky’定位时，它会根据父元素设置固定位置，而不是像‘fixed’定位一样相对于视窗进行定位。

所以，当我们滚动父元素时，具有‘sticky’定位的HTML元素将会固定，并且当达到偏移量时。

语法

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

position: sticky

示例2

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

在输出中，用户可以观察到当他们滚动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”则根据父元素设置位置。