小心 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 一.哥,我被你 ...
随机推荐
- 你真的了解UIApplication吗?
一:首先查看一下关于UIApplication的定义 NS_CLASS_AVAILABLE_IOS(2_0) @interface UIApplication : UIResponder //获得单例 ...
- Java Collection Framework概述
文章出自:听云博客 Collection概述 Java collection是java提供的工具包,包含了常用的数据结构:集合.链表.队列.栈.数组.映射等. Java集合主要可以划分为4个部分:Li ...
- Provisioning Profile文件在哪找?
~/Library/MobileDevice/Provisioning Profiles
- 常见HTTP状态码
常见HTTP状态码 200 OK 301 Moved Permanently 302 Found 304 Not Modified 307 Temporary Redirect 400 Bad Req ...
- git diff的用法
在git提交环节,存在三大部分:working tree(工作区), index file(暂存区:stage), commit(分支:master) working tree:就是你所工作在的目录, ...
- Sublime更换默认字体的方法
Sublime是一款很不错的编辑器,不过默认安装后的字体却不尽人意,并且Sublime竟然连个完整的设置页面都没有(直接让你编辑配置文件).于是很多人对这字体就忍气吞声了.其实只要添加一行代码就可以完 ...
- android双击返回键退出程序的实现
/** * 菜单.返回键响应 */ @Override public boolean onKeyDown(int keyCode, KeyEvent event) { // TODO Auto-gen ...
- sql server使用中遇到的问题记录
一.sql server 不能连接远程服务器,但可以连接本地的数据库 我目前用的是sql server 2012 sp1,用着用着突然就不能连接远程服务器上的数据库了,崩溃了一天... 修复试了,卸载 ...
- 一个update的小故事
偶尔测试了一段小代码,写个循环 if object_id('tempdb..#TB') is not null drop table #TB go create table #TB ( ID int ...
- iOS 判断内容是否是中文,两种实现
用category实现 新建类别文件,代码 .h文件 #import <Foundation/Foundation.h> @interface NSString (Valid) - (BO ...