CSS的position属性用于指定元素在文档流中的定位方式，position属性和top、bottom、left、right属性一起决定元素的最终位置。position属性拥有static、relative、absolute、fixed、sticky五个可选项，下面动画展示了一个吸顶导航菜单的样式，当向上滚动页面时导航菜单始终黏在顶部位置，使用sticky属性可以轻松实现这个效果。

在正式引出sticky特性之前，有必要重新回顾下position各个属性的特征，真正理解了它们的含义用起来才会得心应手，出现问题也有清晰的思路去排查并解决它，而且理解sticky也依赖对其他属性的理解。

static是默认行为

该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。见下图黄色方框的位置，它所在的位置就是正常文档流应在的位置。

relative是相对原位置的偏移

该关键字下，元素先放置在未添加定位时的位置，在不改变页面布局的前提下调整元素位置。继续看黄色方框，假如仅仅设置position为relative的话，黄色方框的位置和static位置是一样的，也就是它按照正常文档流布局，但是此时top、left、right、bottom属性会改变黄色方框的位置，示例中黄色方框相对于原有位置向左、向下偏移了40px。

absolute是相对父级元素的偏移

元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。包裹黄色方框的元素position被设置为relative，那么黄色方框就会依据其父级元素的位置为基准进行定位，示例中它相对于父级元素向左、向下偏移40px。

fixed是相对于视口的偏移

元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。下面的示例点击固定定位后，黄色方框移到了浏览器视口向左、向下40px的位置，且无论页面如何滚动，黄色框的位置始终和浏览器视口相对位置不变。

sticky是relative和fixed的结合体

最后，终于说到了ticky属性，它是relative和fixed属性的结合体，示例中黄色方框的样式设置为"position: sticky; top: 20px;"，为了演示sticky的效果，将其上级元素设置了一个固定的高度并显示滚动条，当黄色方框与父元素的顶部高度大于20px时，它表现出relative的行为（也和static相似），正常布局到文档流中；当达到top为20px阈值之后，黄色方框始保持top=20px的位置，表现出黏在顶端的效果，此时表现出fixed的行为。

最后给出上面演示示例的完整源码，实际运行并点击每个选项实际体验一下，相信理解会更加深刻：

    
    
    
    



    
Position属性效果演示
    

        

            

                
                    默认定位 

                    position: static;
                
                
                    相对定位

                    position: relative;
                    top: 40px; left: 40px;
                
                
                    绝对定位

                    position: absolute;
                    top: 40px; left: 40px;
                
                
                    固定定位

                    position: fixed;
                    top: 40px; left: 40px;
                
                
                    粘性定位

                    position: sticky;
                    top: 20px;
                
            
            

                

                    

                        
这个示例演示css position属性
                        

                        

                        

                        

                        

                        

                        
为了演示position: sticky效果
                        
这里增加了一个可滚动的容器
                        
上下滚动这段内容
                        
你将发现黄色框会始终停留在视线范围内
                        
就像黏在在顶部一样
                        
重新向下滚动
                        
黄色框还会恢复到原来的位置
                        
使用sticky特性
                        
可以实现很多特效
                        
比如始终黏在顶部的菜单栏
                        
发挥想象力还可以实现其他效果...
                    
                
            
        
    

    <script>
        function updateStyle(position_mode) {
            let box = document.getElementById("example-element")
            if (position_mode == 'static') {
                box.style = ""
            } else if (position_mode == 'relative') {
                box.style = "position: relative; top: 40px; left: 40px;"
            } else if (position_mode == 'absolute') {
                box.style = "position: absolute; top: 40px; left: 40px;"
            } else if (position_mode == 'fixed') {
                box.style = "position: fixed; top: 40px; left: 40px;"
            } else if (position_mode == 'sticky') {
                box.style = "position: sticky; top: 20px;"
            }
        }
    </script>

参考文献

[1]. https://developer.mozilla.org/zh-CN/docs/Web/CSS/position