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

在本文中，我们将讨论两个非常相似的 CSS 属性，它们是position: sticky和position: fixed 。

CSS 中的 Position 属性指定 HTML 元素或实体的定位。可以通过指定 top、right、bottom 和 left 属性来设置元素的位置。这些指定 HTML 元素与视口边缘的距离。要通过这四个属性设置位置，我们必须声明定位方法。 CSS 中有五个可用的定位属性：

• Fixed ：元素的位置将相对于视口定位。
• 静态：元素将根据页面的正常流程进行定位。
• 相对：元素保持在文档的正常流程中，但影响左、右、上和下。
• Absolute ：元素的位置将相对于最近的定位祖先。
• Sticky ： position: sticky和top: 0的元素根据其放置的位置在固定和相对之间发挥作用。

我们将只讨论位置：固定和粘性属性。这两者都用于将元素固定到 HTML 页面中的某个位置。有关更多详细信息，请参阅 CSS 定位元素文章。

position: fixed表示固定在视口上。我们提供位置值（顶部、底部、右侧或左侧），并且当用户滚动时元素会停留在那里。无论屏幕上发生什么，固定元素都不会移动。

句法：

selector {
     position: fixed;
}

示例：当我们使用position: fixed属性时，无论屏幕上发生什么，元素都保持固定在其位置，它固定在视口上。

HTML

    

  

    
This div has 
        position: fixed; 
    
    

        What We Offer We provide a variety of 
        services for you to learn, thrive and 
        also have fun! Free Tutorials, Millions 
        of Articles, Live, Online and Classroom 
        Courses, Frequent Coding Competitions, 
        Webinars by Industry Experts, Internship 
        opportunities and Job Opportunities.
    

    
 
        What We Offer We provide a variety of 
        services for you to learn, thrive and 
        also have fun! Free Tutorials, Millions 
        of Articles, Live, Online and Classroom 
        Courses, Frequent Coding Competitions, 
        Webinars by Industry Experts, Internship 
        opportunities and Job Opportunities.
    

    
 
        What We Offer We provide a variety of 
        services for you to learn, thrive and 
        also have fun! Free Tutorials, Millions 
        of Articles, Live, Online and Classroom 
        Courses, Frequent Coding Competitions, 
        Webinars by Industry Experts, Internship 
        opportunities and Job Opportunities.
    

    
 
        What We Offer We provide a variety of 
        services for you to learn, thrive and 
        also have fun! Free Tutorials, Millions 
        of Articles, Live, Online and Classroom 
        Courses, Frequent Coding Competitions, 
        Webinars by Industry Experts, Internship 
        opportunities and Job Opportunities.
    
 

输出：

position:sticky意味着元素将滚动直到达到用户给它的偏移值，然后停留在它的位置。粘性元素始终停留在其父块内，一旦父块作为滚动效果离开屏幕，粘性元素也会随之离开。

句法：

selector {
     position: sticky;
}

示例：当我们使用position:sticky属性时，元素滚动直到它接触到顶部，尽管进一步滚动，它仍将固定在该位置。

HTML

    

  

    

       What We Offer We provide a variety of 
        services for you to learn, thrive and 
        also have fun! Free Tutorials, Millions 
        of Articles, Live, Online and Classroom 
        Courses, Frequent Coding Competitions, 
        Webinars by Industry Experts, Internship 
        opportunities and Job Opportunities.
    

    
This div has 
        position: sticky;
    
    
 
        What We Offer We provide a variety of 
        services for you to learn, thrive and 
        also have fun! Free Tutorials, Millions 
        of Articles, Live, Online and Classroom 
        Courses, Frequent Coding Competitions, 
        Webinars by Industry Experts, Internship 
        opportunities and Job Opportunities.
    

    
 
        What We Offer We provide a variety of 
        services for you to learn, thrive and 
        also have fun! Free Tutorials, Millions 
        of Articles, Live, Online and Classroom 
        Courses, Frequent Coding Competitions, 
        Webinars by Industry Experts, Internship 
        opportunities and Job Opportunities.
    

    
 
        What We Offer We provide a variety of 
        services for you to learn, thrive and 
        also have fun! Free Tutorials, Millions 
        of Articles, Live, Online and Classroom 
        Courses, Frequent Coding Competitions, 
        Webinars by Industry Experts, Internship 
        opportunities and Job Opportunities.
    

    
 
        What We Offer We provide a variety of 
        services for you to learn, thrive and 
        also have fun! Free Tutorials, Millions 
        of Articles, Live, Online and Classroom 
        Courses, Frequent Coding Competitions, 
        Webinars by Industry Experts, Internship 
        opportunities and Job Opportunities.
    

输出：

position: fixed 和 position:sticky 属性的区别：

S.No.	Position: fixed	Position: Sticky
1.	Element with position: fixed property is fixed to the viewport and doesn’t move irrespective of scrolling.	Element with position: sticky property can scroll to an offset value provided by the user.
2.	Element with position: fixed property never leaves the viewport position it was fixed to.	Element with position: sticky property leaves the viewport when its parent element scrolls off the viewport.
3.	This property is supported by all the browsers.	This property is only supported by all modern browsers.
4.	Element with position: fixed property does not effect the other element’s flow on the page ie it does not capture additional space.	Element with position: sticky property does effect the other element’s flow in the page ie., it will take the additional space.

支持的浏览器：

位置：固定支持：

• 谷歌浏览器 1.0
• 互联网浏览器 7.0
• 微软边缘 12.0
• 火狐1.0
• 歌剧 4.0
• Safari 1.0

位置：sticky支持：

• 谷歌浏览器 56.0
• 微软边缘 16.0
• 火狐 32.0
• 歌剧 43,0
• Safari 13.0