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原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
html5与css3小应用
Apr 03 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 HTML / CSS
HTML5 video 事件应用示例
Sep 11 HTML / CSS
HTML5事件方法全部汇总
May 12 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
Nov 19 HTML / CSS
前端水印的简单实现代码示例
Dec 02 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 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提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
yii框架无限极分类的实现方法
2017/04/08 PHP
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
Python实现的科学计算器功能示例
2017/08/04 Python
Django 使用logging打印日志的实例
2018/04/28 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
python自动识别文本编码格式代码
2019/12/26 Python
Python序列化pickle模块使用详解
2020/03/05 Python
Python操作Excel的学习笔记
2021/02/18 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
三星美国官网:Samsung美国
2017/02/06 全球购物
Marlies Dekkers内衣美国官方网上商店:高端内衣品牌
2018/11/12 全球购物
大学生工作推荐信范文
2013/12/02 职场文书
安全检查验收制度
2014/01/12 职场文书
单位授权委托书范文
2014/08/02 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS
nginx配置指令之server_name的具体使用
2022/08/14 Servers
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS