关于前端:纯css让elementui表格实现吸顶效果及-position-sticky-的使用

36次阅读

共计 832 个字符,预计需要花费 3 分钟才能阅读完成。

代码例子

代码例子,网址: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…
正文完
 0