文档章节

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

noonoo
 noonoo
发布于 2014/12/04 09:01
字数 537
阅读 1301
收藏 4

我想锁表头及锁定列。昨天新找的方法是用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分钟看了文章,半小时解决问题,高兴得想哭,我逝去的时间呀。。。。。

© 著作权归作者所有

noonoo
粉丝 17
博文 72
码字总数 38771
作品 0
深圳
程序员
私信 提问
Python 串联 lists 的方法

今天在 stack overflow 上看到一个标题问题的解法,感到非常的牛逼,遂记录下来: 通常的标准答案是使用 但这个答案更加精妙: 附:

lionets
2017/11/03
0
0
深入理解CSS中的层叠上下文和层叠顺序

深入理解CSS中的层叠上下文和层叠顺序 上下文 前端大全 · 2016-01-20 20:12 (点击上方公众号,可快速关注) 作者:张鑫旭 网址:http://www.zhangxinxu.com/wordpress/2016/01/understand-cs...

LorinLuo
2016/03/03
51
0
CSS3 transform 引起z-index失效

作者:汪娇娇 时间:2017年9月5日 单纯的z-index,可以通过设置数值的大小来决定层级的高低,但一涉及transform,z-index就失效了,为什么咩? 辣是因为,web中的任何元素都存在于一个三维空...

娇娇jojo
2017/09/05
0
8
好程序员web前端系列之CSS3-3D

好程序员web前端系列之CSS3-3D,什么是3d的场景呢? 2d场景,在屏幕上水平和垂直的交叉线x轴和y轴 3d场景,在垂直于屏幕的方法,相对于3d多出个z轴 Z轴:靠近屏幕的方向是正向,远离屏幕的方...

好程序员IT
05/08
0
0
CSS3 3D Transform

前2011年5月就在站上写了一篇《CSS3 Transform》介绍CSS3中Transform属性的简单应用。但这篇文章里的知识无法满足大家对Transform的一个全面认识,最近重新整理了一个Transform系列的文章,希...

石佛慈悲
2013/12/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Netty源码学习(一)--导入IDEA并编译

1.从github下载最新的Netty稳定版本源码 2.解压源码文件夹 3.导入IDEA 4.跳过checkstyle和xml validate <plugin> <artifactId>maven-checkstyle-plugin</artifactId> <version>2.12.......

湖之风情
10分钟前
1
0
电商网站用户端FE

需求拆分原则 1、单个迭代不宜太大 2、需求可交付,能够形成功能闭环 3、有成本意识,遵循二八原则 4、有预期的价值体现 提炼核心需求 用户端:商品、购物车、下单、支付、订单、用户 后台管...

星闪海洋
22分钟前
1
0
Awesome Blockchain 区块链技术导航

区块链技术导航:收集整理最全面最优质的区块链(BlockChain)技术开发相关资源。 以后找不到文档资料的时候去导航站看看。 先亮个像,我长这样: 导航站内容 区块链开发所涉及的资源: 如 项目...

Tiny熊
26分钟前
1
0
聊聊我的第一篇10万+,同时反驳某些评论

元旦的时候,我立了一个Flag,今年要写一篇10万+,现在目标算是完成一半了。 终于有了一篇10万+ 知乎后台显示我的回答《如何衡量一个人的 JavaScript 水平?》的阅读量已经超过了10万,具体截...

Fundebug
32分钟前
1
0
ping的用法

ping的用法: -t ping指定的主机,直到停止。若要查看统计信息并继续操作-请键入 Control-Break; 若要停止-请键入Control-C。 -a 将地址解析成主机名。 -n count 要发送的回显请求数。 -l s...

WinkJie
33分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部