https://www.douban.com/note/343402554/

http://www.jb51.net/css/255811.html

最后我直接removeClass;把transform:rolate(...deg)去掉,改了下逻辑,解决!

百度到这里《小心 CSS3 Transform 引起的 z-index "失效"》

“CSS3 Transform create new stacking context”

这个道理想想也明白,Transform 就是一个影子,假像,所以它不考虑z-index.那怎么解决呢?

再百度,以及去stackoverflow看文章,也没办法。既然不能控制“new stacking context"想想为什么列会盖住表头吧??

"不就是因为列元素在表头的底下嘛”

想到这里,很激动。

于是生成表时,这样写:

1
 tbody = $('<tbody>'); me.prepend(tbody);

原来写的是append,现在改为prepend,这样保证table内的顺序是tbody,thead,tfoot.

测试各各浏览器,正常了!超牛逼。突然感觉到,原来人是有着无穷创造力及折腾力。

 

附:

这很长时间都在折腾锁表头,锁列的问题。我本人首先否定克隆表等方法,页面混乱,很多地方需要手工对齐,新元素在表之上,影响表头上的事件。于是我之后就是无穷的折腾了。

既然我必须要在一个table中实现,试了很多方法,写了很多css,js,无非就是让td,th浮起来,或是在里面加入元素后再浮起来,无论如何做, 结果就是速度慢了下来,锁定部分跳动。  也试过其它插件(克隆表头,然后fix在那里),可能是用法问题,多少有些问题。折腾得想放弃了。

昨天下午突然看到transform的方法,其实写表插件的开始,我也想过到这个,但一直没动手去做,因为一直没有搜到过有人这么用。或许是老天可怜我了,让我1分钟看了文章,半小时解决问题,高兴得想哭,我逝去的时间呀。。。。。

小心 CSS3 Transform 引起的 z-index "失效"的更多相关文章

  1. CSS3 transform 属性

    CSS3 transform 属性 语法: transform: none|transform-functions; 值 描述 none 定义不进行转换. matrix(n,n,n,n,n,n) 定义 ...

  2. CSS3 Transform变形理解与应用

    CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开 ...

  3. CSS3 : transform 与 transform-origin 属性可以使元素样式发生转变

    CSS3 : transform 用于元素样式的转变,比如使元素发生位移.角度变化.拉伸缩小.按指定角度歪斜 transform结合transition可实现各类动画效果 transform : tr ...

  4. 【CSS3】 理解CSS3 transform中的Matrix(矩阵)

    理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...

  5. CSS3 transform rotate(旋转)锯齿的解决办法

    -moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...

  6. 理解CSS3 transform中的Matrix(矩阵)

    一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...

  7. CSS3 transform对普通元素的N多渲染影响

    一.一入transform深似海 一个普普通通的元素,如果应用了CSS3 transform变换,即便这个transform属性值不会改变其任何表面的变化(如scale(1), translate(0 ...

  8. 基于css3 transform实现散乱的照片排列

    分享一款基于css3 transform实现散乱的照片排列.这是一款简单零散的css3相册排列特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class= ...

  9. 理解CSS3 transform中的Matrix(矩阵)——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...

随机推荐

  1. Android 第一个程序 及 环境搭配

    一. JDK配置 1.找到jdk安装路径 2.配置环境变量(建议配置在系统变量里面) 1).配置JAVA_HOME变量 2).配置 CLASSPATH 环境变量 CLASSPATH=.;%JAVA_H ...

  2. Virtualbox虚拟机安装CentOS6.5图文详细教程

    什么是Virtualbox? VirtualBox 是一款开源虚拟机软件(注:跟vmware差不多).VirtualBox 是由德国 Innotek 公司开发,由Sun Microsystems公司出 ...

  3. 传统模式下WebService与WebAPI的相同与不同

    1.WebService是利用HTTP管道实现了RPC的一种规范形式,放弃了对HTTP原生特征与语义的完备支持:而WebAPI是要保留HTTP原生特征与语义的同时实现RPC,但WebAPI的实现风格可 ...

  4. 使用jqgrid的C#/asp.net mvc开发者的福音 jqgrid-asp.net-mvc

    你是否使用jqgrid? 你是否想在C#/asp.net mvc中使用jqgrid? 那你很可能曾经为了分析jqgrid的request url用fiddler忙活了2个小时.(如果你要使用jqgri ...

  5. Oracle表字段的增加、删除、修改和重命名

    本文主要是关于Oracle数据库表中字段的增加.删除.修改和重命名的操作. 增加字段语法:alter table tablename add (column datatype [default val ...

  6. hadoop2.2.0伪分布式搭建1--准备Linux环境

    1.0修改网关 点击VMware快捷方式,右键打开文件所在位置 -> 双击vmnetcfg.exe -> VMnet1 host-only ->修改subnet ip 设置网段:19 ...

  7. Access restriction: The type 'RSACipher' is not API

    解决方法: http://stackoverflow.com/questions/860187/access-restriction-on-class-due-to-restriction-on-re ...

  8. oracle11G使用DGbroker创建dg

    1.环境: a.主机环境:centos6.5 b.软件环境:oracle 11.2.0.4 c.主机信息: DG1:192.168.100.51(数据库sid:atest) DG2:192.168.1 ...

  9. 查看Android支持的硬解码信息

    通过/system/etc/media_codecs.xml可以确定当前设备支持哪些硬解码.通过/system/etc/media_profiles.xml可以知道设备支持的具体profile和lev ...

  10. iOS 实现Tabbarcontroller中间自定义样式 最简单的方法

    先上图: 如果我们要实现中间按钮自定义样式,方法应该蛮多,这里介绍一种最简单的. 1.创建类继承:UITabBarController,如下代码都是写在该类的 .m文件里 2.定义最中间的自定义样式, ...