一、CSS Sticky是什么？
CSS Sticky是一种CSS属性，其作用是使页面元素在到达某一触发位置时“粘”在页面上，不随页面滚动而消失。这种属性可以让用户在访问页面时更加流畅，同时还能提高用户体验。
二、CSS Sticky的基本用法
对于初学者而言，了解CSS Sticky的基本用法非常重要。我们可以使用position：sticky属性，来创建一个“粘性”的页面元素，具体代码如下所示：
.selector{
position: sticky;
top: 0;
}
这段代码的作用是将元素.selector绑定在页面中，并且当元素到达视口的顶部时使其“粘”在该位置，不随页面滚动而消失。而top属性则规定了元素“粘”在页面中的位置，以像素计算。
三、CSS Sticky的高级特性
CSS Sticky不仅仅是一种基本属性，它还有许多高级特性可以使用。下面我们将介绍其中的一些。
1. Sticky Stacking Order
这个属性用于控制多个“粘性”的页面元素之间的层次关系。具体使用方法如下：
.selector1 {
z-index: 2;
}
.selector2 {
z-index: 1;
}
其中，z-index属性规定了元素在何处绘制，在元素的层叠上下文（stacking context）中，层级高的元素总是先绘制，而层叠次之的元素则会覆盖前者。
2. Scrolling Out of Viewport
这个属性用于控制页面元素滚出可见视口后的行为。具体使用方法如下：
.selector {
position: sticky;
top: 0;
bottom: 0;
}
其中，bottom属性规定了元素滚出视口时的行为。在该代码中，元素将一直保持在视口中，直到它占满整个屏幕并滚动出视口为止。
3. Sticky Table Headers
这个属性用于创建一个可以固定表头的表格。具体使用方法如下：
table {
overflow-y: auto;
display: block;
}
thead {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: #FFF;
}
其中，overflow-Y：auto和display:block属性的作用是使表格具有滚动条，并保持其大小不变。而-thead元素将被设为“粘性”，并且其将跟随滚动而“粘”。该代码的作用是在表格滚动时，固定表头，使每个单元格始终可见。
四、CSS Sticky的兼容性
CSS Sticky是较新的CSS属性，因此它的兼容性仍然存在问题。有些浏览器只支持“粘性”宽度为固定像素值的元素。不过，通过使用polyfill（跨浏览器的代码库），我们可以使CSS Sticky在所有浏览器中都能够正常工作。
五、总结
CSS Sticky是一种非常有用的CSS属性，它可以让我们创建一些非常酷的页面功能，比如固定页眉、页脚和侧边栏等。虽然它的兼容性仍然不是很好，但随着时间的推移，这一属性将会得到更加广泛的应用。如果你想要创建更多精彩的页面效果，一定要掌握CSS Sticky这一属性。
