CSS 粘性定位(position: sticky)问题

这里主要讨论下粘性定位 position：sticky 其他定位可参考 w3cschool

这里分条讲述：
一：应用场景
当有滚动条的时候，你想将一个元素固定在界面上，拖动滚动条，其位置依然没有变动的时候使用
例如下图：

二：解决方案

<!-- 效果：当不拖动滚动条时，新建按钮会占用一定的位置，并把table给挤到下方去，拖动滚动条时，按钮会固定在这个位置，不会被上方王小虎所在的div盒子遮挡 -->
<style scoped="scoped">
.add{
	position: sticky;
	top: 0;
}
</style>

三：对比 position:fixed
position:fixed 会脱离文档流，能实现拖动滚动条，新建按钮位置不变化，但是同样 table 并不会被新建按钮挤开，会被新建按钮遮挡一部分，如下图：

所以若想不被遮挡，还需要针对table设置定位属性，相对粘性定位比较麻烦

三：官方粘性定位 position: sticky 解释
粘性定位，该定位基于用户滚动的位置。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。