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 border-radius属性详解
Jul 05 HTML / CSS
CSS3伪类选择器:nth-child()
Apr 02 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
May 23 HTML / CSS
Html5页面二次分享的实现
Jul 30 HTML / CSS
详解WebSocket跨域问题解决
Aug 06 HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 HTML / CSS
CSS完成视差滚动效果
Apr 27 HTML / CSS
CSS使用伪类控制边框长度的方法
Jan 18 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
php中用foreach来操作数组的代码
2011/07/17 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
js Flash插入函数免激活代码
2009/03/31 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
jquery foreach使用示例
2013/09/12 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
视觉直观感受若干常用排序算法
2017/04/13 Python
Python不使用int()函数把字符串转换为数字的方法
2018/07/09 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
python命令行工具Click快速掌握
2019/07/04 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
ubuntu 18.04 安装opencv3.4.5的教程(图解)
2019/11/04 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
介绍Java的内部类
2012/10/27 面试题
局域网定义和特性
2016/01/23 面试题
汉语言文学毕业生求职信
2013/10/01 职场文书
致长跑运动员广播稿
2014/01/31 职场文书
保护环境建议书400字
2014/05/13 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年学校卫生工作总结
2014/11/20 职场文书
简爱读书笔记
2015/06/26 职场文书
2019年大学推荐信
2019/06/24 职场文书
Pytorch 实现变量类型转换
2021/05/17 Python
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技