小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
最近在做一个表格支持冻结列的需求，刚拿到这个需求我是懵的，脑子里没有方案。然后就请教了带我的师傅，师傅说可以考虑使用position: sticky;下面就简单记录一下粘性定位。
position属性
position属性用于指定一个元素在文档中的定位方式。
top，right，bottom和left属性则决定了该元素的最终位置。
-
position static 默认值
-
position relative 相对定位；相对于其正常的位置进行定位；不脱离文档流；
-
position absolute 绝对定位；相对于父级已声明了定位方式的元素进行定位；脱离文档流；
-
position fixed 固定定位；相对于屏幕视口进行定位；脱离文档流；
position sticky 粘性定位
position sticky 粘性定位；基于用户滚动距离来定位，在
position:relative与 position:fixed 定位之间切换。刚开始它是position:relative，而当页面滚动超出目标区域时，它的表现就像 position:fixed ，它会固定在目标位置。目标位置是指top，right，bottom和left属性值之一。使用粘性定位必须指定这四个属性值的其中一个。
应用
列表滚动、通讯录滚动
类似于这种，滚动时上方一直显示当前分类名称。
<style>
.container {
width: 500px;
height: 500px;
margin: 40px auto;
position: relative;
overflow: auto;
}
.list {
min-height: 1600px;
background: #FFFFFF;
}
.list-content {
padding: 10px 20px;
}
.list-header {
padding: 10px;
background: #2D2D2D;
color: #FFFFFF;
font-weight: bold;
position: -webkit-sticky;
position: sticky;
top: 0;
}
</style>
<body>
<div class="container">
<div class="list">
<div class="list-group">
<div class="list-header">A</div>
<div class="list-content">
<div>Apple</div>
<div>Artichoke</div>
<div>Aardvark</div>
<div>Ant</div>
<div>Acorn</div>
</div>
</div>
<div class="list-group">
<div class="list-header">B</div>
<div class="list-content">
<div>Bpple</div>
<div>Brtichoke</div>
<div>Bardvark</div>
<div>Bnt</div>
<div>Bcorn</div>
</div>
</div>
<div class="list-group">
<div class="list-header">C</div>
<div class="list-content">
<div>Cpple</div>
<div>Crtichoke</div>
<div>Cardvark</div>
<div>Cnt</div>
<div>Ccorn</div>
</div>
</div>
<div class="list-group">
<div class="list-header">D</div>
<div class="list-content">
<div>Dog</div>
<div>Date</div>
<div>Danish</div>
<div>Dandelion</div>
</div>
</div>
</div>
</div>
</body>
兼容性
如下图所示，当前并不是所有的浏览器都支持position:sticky粘性定位的，并且position:sticky对安卓好像不太友好，所以不推荐在大型应用中使用。
图片来源于：Can I use官网(一款前端兼容性自查工具)
