专栏首页前端侠2.0css3的transform造成z-index无效, 附我的牛逼解法

css3的transform造成z-index无效, 附我的牛逼解法

我想锁表头及锁定列。昨天新找的方法是用css3的transform,这个应该在IE9以上都可以的。

只锁头效果很好,IE11下会小抖,但chrome下很稳定停在那里。后来又加上锁定列,发现列会盖住表头。

百度到这里《小心 CSS3 Transform 引起的 z-index "失效"》

“CSS3 Transform create new stacking context”

这个道理想想也明白,Transform 就是一个影子,假像,所以它不考虑z-index.那怎么解决呢?

再百度,以及去stackoverflow看文章,也没办法。既然不能控制“new stacking context"想想为什么列会盖住表头吧??

"不就是因为列元素在表头的底下嘛”

想到这里,很激动。

于是生成表时,这样写:

 tbody = $('<tbody>');
 me.prepend(tbody);

原来写的是append,现在改为prepend,这样保证table内的顺序是tbody,thead,tfoot.

测试各各浏览器,正常了!超牛逼。突然感觉到,原来人是有着无穷创造力及折腾力。

附:

这很长时间都在折腾锁表头,锁列的问题。我本人首先否定克隆表等方法,页面混乱,很多地方需要手工对齐,新元素在表之上,影响表头上的事件。于是我之后就是无穷的折腾了。

既然我必须要在一个table中实现,试了很多方法,写了很多css,js,无非就是让td,th浮起来,或是在里面加入元素后再浮起来,无论如何做, 结果就是速度慢了下来,锁定部分跳动。  也试过其它插件(克隆表头,然后fix在那里),可能是用法问题,多少有些问题。折腾得想放弃了。

昨天下午突然看到transform的方法,其实写表插件的开始,我也想过到这个,但一直没动手去做,因为一直没有搜到过有人这么用。或许是老天可怜我了,让我1分钟看了文章,半小时解决问题,高兴得想哭,我逝去的时间呀。。。。。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • underscore.js的排序扩展。 倒序和多列排序

    申君健
  • SuperSocket.WebSocket 摸索记录

    文档:http://docs.supersocket.net/v1-6/zh-CN

    申君健
  • 测试http缓存如何才生效! 原

               浏览器和服务器之间通过 (ETag, If-None-Match )   (Last-Modified ,If-Modified-Sinc...

    申君健
  • java生成二维码前言:java生成二维码demo:总结:

    先聊聊题外话,话说在1994年,日本的丰田汽车公司独立出来了一个电装公司。由于高精度的汽车零配件需要匹配很多信息,而传统的条形码容量有限,在电装公司的腾弘原的带...

    贪挽懒月
  • Tree-Shaking的工作原理

    Tree-shaking (树摇)最早是由Rollup实现,是一种采用删除不需要的额外代码的方式优化代码体积的技术,webpack2借鉴了这个特性也增加了tre...

    伯爵
  • Java Socket编程——通信是这样炼成的

    Java最初是作为网络编程语言出现的,其对网络提供了高度的支持,使得客户端和服务器的沟通变成了现实,而在网络编程中,使用最多的就是Socket。像大家熟悉的QQ...

    Java团长
  • Python import同级目录报错

    参考:http://blog.csdn.net/geekleee/article/details/52505233

    py3study
  • rest framework 尝鲜

    程序员同行者
  • 补充上一篇 实现基于最新chrome的动态按需加载组件

    上面代码中,import函数的参数specifier,指定所要加载的模块的位置。import命令能够接受什么参数,import()函数就能接受什么参数,两者区别...

    mafeifan
  • pyecharts 生成网页后,资源加载缓慢,你知道怎么解决吗?

    从图中我们可以发现,静态资源 echarts.min.js 竟然读取了2.0s+的时间,这就非常不能忍了。

    abs_zero

扫码关注云+社区

领取腾讯云代金券