小心 CSS3 Transform 引起的 z-index "失效"
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 "失效"的更多相关文章
- CSS3 transform 属性
CSS3 transform 属性 语法: transform: none|transform-functions; 值 描述 none 定义不进行转换. matrix(n,n,n,n,n,n) 定义 ...
- CSS3 Transform变形理解与应用
CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开 ...
- CSS3 : transform 与 transform-origin 属性可以使元素样式发生转变
CSS3 : transform 用于元素样式的转变,比如使元素发生位移.角度变化.拉伸缩小.按指定角度歪斜 transform结合transition可实现各类动画效果 transform : tr ...
- 【CSS3】 理解CSS3 transform中的Matrix(矩阵)
理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...
- CSS3 transform rotate(旋转)锯齿的解决办法
-moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...
- 理解CSS3 transform中的Matrix(矩阵)
一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...
- CSS3 transform对普通元素的N多渲染影响
一.一入transform深似海 一个普普通通的元素,如果应用了CSS3 transform变换,即便这个transform属性值不会改变其任何表面的变化(如scale(1), translate(0 ...
- 基于css3 transform实现散乱的照片排列
分享一款基于css3 transform实现散乱的照片排列.这是一款简单零散的css3相册排列特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class= ...
- 理解CSS3 transform中的Matrix(矩阵)——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...
随机推荐
- UISearchController
搜索框UISearchController的使用(iOS8.0以后替代UISearchBar + UIS) 1.在iOS 8.0以上版本中, 我们可以使用UISearchController来非常方便 ...
- Android 手机卫士--实现设置界面的一个条目布局结构
本文地址:http://www.cnblogs.com/wuyudong/p/5908986.html,转载请注明源地址. 本文以及后续文章,将一步步完善功能列表: 要点击九宫格中的条目,需要注册点击 ...
- Android下创建一个SQLite数据库
数据库:SQLite(轻量级,嵌入式的数据库) 大量的相似结构的数据的储存,快速的查询.特殊的文件(按照一定的格式生成) 数据库的创建 创建文件 1.声明文件对象,文件是不会被创建出来的. File ...
- IOS中十六进制的颜色转换为UIColor
IOS中十六进制的颜色转换为UIColor #pragma mark - 颜色转换 IOS中十六进制的颜色转换为UIColor + (UIColor *) colorWithHexString: (N ...
- JSON TO NSDictionary Mac & iOS
NSString * jsonPath=[[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"Cont ...
- HTML和CSS高级指南——定位详解
本文由大漠根据Shay Howe的<An Adavnced Guide to HTML & CSS>第二课<Detailed Positioning>所译,整个译文带有 ...
- jasper 常用知识点总结
1.应用: 列头 "YYYY-MM" 格式转化为 "MM YYYY"格式, eg : Date1 = 2014-11 new java.text.SimpleD ...
- 基于RMI服务传输大文件的完整解决方案
基于RMI服务传输大文件,分为上传和下载两种操作,需要注意的技术点主要有三方面,第一,RMI服务中传输的数据必须是可序列化的.第二,在传输大文件的过程中应该有进度提醒机制,对于大文件传输来说,这点很重 ...
- 烂泥:rsync配置文件详解
本文由秀依林枫提供友情赞助,首发于烂泥行天下. 对于rsync服务器来说,最重要和复杂的就是它的配置了.rsync服务器的配置文件为/etc/rsyncd.conf,其控制认证.访问.日志记录等等. ...
- HTML属性的长度问题
越来越多的同学喜欢把数据存放在html属性上,比如 <p data-info="{a:1,b:2}">xxx</p> 一堆JSON数据放在data-info ...