小心 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 一.哥,我被你 ...
随机推荐
- TexturePacker大图还原成小图工具带源码
TexturePacker是一个把好多小图打成大图的软件,生成的是大图以及小图在大图位置的.plist描述文件,但是不支持把大图还原成小图.网上偷的图一般都是大图和plist,想得到小图比较麻烦,于是 ...
- 干货之UICollectionViewFlowLayout自定义排序和拖拽手势
使用UICollectionView,需要使用UICollectionViewLayout控制UICollectionViewCell布局,虽然UICollectionViewLayout提供了高度自 ...
- View的onSaveInstanceState和onRestoreInstanceState过程分析
为什么要介绍这2个方法呢?这是因为在我们的开发中最近遇到了一个很诡异的bug.大体是这样的:在我们的ViewPager中 有2页的root view都是ScrollView,我们在xml里面都用了an ...
- The JSP specification requires that an attribute name is preceded by whitespace
一个jsp页面在本地运行一点问题没有,发布到服务器就报错了: The JSP specification requires that an attribute name is preceded by ...
- android 进程/线程管理(一)----消息机制的框架
一:android 进程和线程 进程是程序运行的一个实例.android通过4大主件,弱化了进程的概念,尤其是在app层面,基本不需要关系进程间的通信等问题. 但是程序的本质没有变,尤其是多任务系统, ...
- 用户故事地图(User Story Mapping)之初体验
北京这几日的天儿真是好的出奇,白天风和日丽,晚上繁星漫天:在这样一个周六的下午,小编参加了一次北京敏捷社区(微信号:Agile1001)组织的活动:<用户故事地图User Story Mappi ...
- Linux Swap交换分区介绍总结
Swap交换分区概念 什么是Linux swap space呢?我们先来看看下面两段关于Linux swap space的英文介绍资料: Linux divides its physical RA ...
- Linux 内核日志——dmesg
有时Linux系统或者系统上运行的mysqld或者其它进程,会发生一些莫名其妙的问题,比如突然挂掉了,比如突然重启等等.在软件上找不到问题所在,此时我们应该怀疑硬件或者内核的问题,此时我们就可以使用 ...
- Windows7 系统 CMD命令行,点阵字体不能改变大小以及中文乱码的问题
之前装了oracle 11g后,发现开机速度竟然奇葩的达到了3分钟.经过旁边大神指点,说是因为oracle某个(具体不清楚)服务,在断网的时候会不断的ping网络,导致速度变慢.然后就关服务呗,然后一 ...
- C#邮件发送问题(一)
邮件发送需考虑很多因素,包括发送邮件客户端(一般编码实现),发送和接收邮件服务器设置等.如果使用第三方邮件服务器作为发送服务器,就需要考虑该服务器的发送限制,(如发送邮件时间间隔,单位时间内发送邮件数 ...