css3的transform造成z-index无效解决方案


Posted in HTML / CSS onDecember 04, 2014

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

css3的transform造成z-index无效解决方案  

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

css3的transform造成z-index无效解决方案

百度到这里《小心 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分钟看了文章,半小时解决问题,高兴得想哭,我逝去的时间呀。。。。。

HTML / CSS 相关文章推荐
用css3制作纸张效果(外翻卷角)
Feb 01 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
HTML5实践-图片设置成灰度图
Nov 12 HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
Feb 28 HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
Aug 20 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 HTML / CSS
HTML5实现移动端点击翻牌功能
Oct 23 HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
Dec 01 #HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
Nov 27 #HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 #HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 #HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 #HTML / CSS
html5+css3之动画在webapp中的应用
Nov 21 #HTML / CSS
一款恶搞头像特效的制作过程 利用css3和jquery
Nov 21 #HTML / CSS
You might like
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
JS小框架 fly javascript framework
2009/11/26 Javascript
javascript 定义新对象方法
2010/02/20 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
js实现简单的选项卡效果
2017/02/23 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
Python实现的Excel文件读写类
2015/07/30 Python
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
python把1变成01的步骤总结
2019/02/27 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
出纳会计岗位职责
2014/03/12 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python
SQL SERVER中的流程控制语句
2022/05/25 SQL Server
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs
Java使用HttpClient实现文件下载
2022/08/14 Java/Android