纯css让element-ui el-table表格实现吸顶效果，及 position: sticky; 的使用

代码例子

代码例子，网址：https://github.com/cag2050/el...

注意：

1. el-table加position: sticky; 时，表格列不能加fixed属性。

出处：https://www.mizuka.top/2020/0...

正确的使用姿势

1. position: sticky 只相对于第一个有滚动的父级块元素（scrolling mechanism，通过 overflow 设置为 overflow/scroll/auto/overlay 的元素），而不是父级块元素。
2. position: sticky 只有当设置对应的方向(top/right/bottom/left)，才会有作用，并且可以互相叠加，可以同时设置四个方向。
3. 即使设置了 position: sticky，也只能显示在父级块元素的内容区域，他无法超出这个区域，除非你设置了负数的值。
4. position: sticky 并不会触发 BFC，简单来讲就是计算高度的时候不会计算 float 元素。
5. 当设置了 position: sticky 之后，内部的定位会相对于这个元素
6. 虽然 position: sticky 表现的像 relative 或者 fixed，所以也是可以通过 z-index 设置他们的层级。当这个元素的后面的兄弟节点会覆盖这个元素的时候，可以通过 z-index 调节层级。

当你懂了这几个之后，其实这个属性就用起来就很简单了。

出处：【后知后觉系列】css position: sticky 属性以及某些场景的使用：https://juejin.cn/post/684490...

资料	网址
使用 position:sticky 实现粘性布局	https://www.cnblogs.com/coco1...
position:sticky 踩坑记录	http://zzzhen.github.io/2016/...
【后知后觉系列】css position: sticky 属性以及某些场景的使用	https://juejin.cn/post/684490...