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+font字体文件实现圆形半透明菜单具体步骤(图解)
Jun 03 HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 HTML / CSS
使用HTML+Css+transform实现3D导航栏的示例代码
Mar 31 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 HTML / CSS
使用CSS连接数据库的方式
Feb 28 HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 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
Zend的AutoLoad机制介绍
2012/09/27 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
JS 进度条效果实现代码整理
2011/05/21 Javascript
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
2018/10/22 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
简单介绍Python中的JSON模块
2015/04/08 Python
浅析Python中的for 循环
2016/06/09 Python
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
python批量修改图片大小的方法
2018/07/24 Python
Django实现表单验证
2018/09/08 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
护理专科毕业推荐信
2013/11/10 职场文书
架构师岗位职责
2013/11/18 职场文书
2014最新离职证明范本
2014/09/12 职场文书
入党函调证明材料
2015/06/19 职场文书
golang中字符串MD5生成方式总结
2021/07/04 Golang
JavaScript流程控制(循环)
2021/12/06 Javascript