CSS position sticky 的一些微小理解

position 中有哪些属性——相比这是一道送分题，大多数人都知道：static, relative, absolute, fixed，如果能答出 sticky——那么可以给你一颗五角星。

实际上，sticky 在一般的开发中并不常用，主要还是因为兼容性的问题，继续用 caniuse 查 sticky 你会发现支持性并不是很好，所以并不适合大部分业务场景。

不过考虑到我们的业务不需要考虑兼容性，于是就可以用了。所以学习了一波 MDN 的科普：

粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

其实意思也就是说在在某一个范围内会定在屏幕的位置，在范围之外会在容器（父节点的固定位置），就像知乎置于底层的功能条：

之前我们需要通过 JS 去搞，但通过 CSS 就很方便，一个 sticky 就能搞定。

当然实际上我发现，我们设定的其实是阈值，而并非实际的像 absolute 或者 relative 那样的位置，也就是说，设置：

#one { position: sticky; top: 10px; right: 15px; }

只有当水平滚动时，才会触发水平的阈值，所以想要达到 absolute / right: 15px 的效果的时候，通过包裹了一层定位到指定位置的父节点，并且控制了他的高度（更有效精准的控制 sticky 的范围），最终搞定了这个问题。

参考资料：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position