css3的transform造成z-index无效, 附我的牛逼解法。

我想锁表头及锁定列。昨天新找的方法是用css3的transform,这个应该在IE9以上都可以的。

只锁头效果很好,IE11下会小抖,但chrome下很稳定停在那里。后来又加上锁定列,发现列会盖住表头。

百度到这里《小心 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分钟看了文章,半小时解决问题,高兴得想哭,我逝去的时间呀。。。。。

时间: 2024-10-19 09:07:19

css3的transform造成z-index无效, 附我的牛逼解法。的相关文章

CSS3 2D Transform

在 一个二维或三维空间,元素可以被扭曲.移位或旋转.只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴:而3D变形工作在X轴和Y轴之外, 还有一个Z轴.这些3D变换不仅可以定义元素的长度和宽度,还有深度.我们将首先讨论元素在2D平面如何变换,然后我们在进入3D变换的讨论. CSS3 2D变换让Web设计师有了更多的自由来装饰和变形HTML组件.同时让设计师有更多的功能装饰文本和更多动画选项来装饰Div元素.在CSS3 2D变形中主要包含的一些基本功能如下. 位移translate()

好吧,CSS3 3D transform变换,不过如此!

一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了~~ 看看下图女帝的动作以及神情,就可以知道名字带D的家伙的厉害! 最近折腾iPad的一些东西,有一些3D效果的交互.有些事情,总以为是遥远的未来,谁知真正发生的时候说来就来,比如说一颗想结婚的心,又比方说在实际项目中折腾3D transform效果. 然而,虽然以前折腾过3D变换效果(webkit

css3 - 3D transform 变化

3d 视图效果,x/y/z轴的说明图 1 rotateX( angle ) 2 rotateY( angle ) 3 rotateZ( angle ) 4 rotate旋转的意思,rotateX旋转X轴,rotateY旋转Y轴,rotateZ旋转Z轴 rotateX.rotateY.rotateZ.rotate3d 旋转的效果说明图 必不可少的 perspective 属性 1 perspective的中文意思是:透视,视角! 2 perspective属性的存在与否决定了你所看到的是2次元的还

css3之transform的应用

一.利用transform实现图片额外显示 效果图如下 初始状态: 鼠标移上去之后: 背景色的问题鼠标移上去之后图片变的模糊一些了. 关键是显示右下角的白色部分,在figcation里面除了添加了文字内容,还添加了一个div.用这个div来达到我们想要的右下角白色区域的效果.思路:先给div设置足够的宽高,然后给div设置背景色,刚开始设置div隐藏,用transform中的translate属性,将div位置设置在图片外面.当鼠标放在图片上面时,给div重设位置,让其显示在图片中.关键是不要让

css3的transform转换属性。

今天做了一个基础的小例子熟悉一下这个属性. <!DOCTYPE html> <html> <head> <title>transform</title> <style> #box{ width:100px; height:100px; background:#cecece; margin:100px auto; /* css3 start rotate :旋转 ,正数时为顺时针方向,负数时为逆时针方向 translate:移动,x,y

CSS3 3D transform

3D transform中有下面这三个方法: rotateX( angle ) rotateY( angle ) rotateZ( angle ) 邹凯的体操单杠运动是rotateX: 蔡依林姐姐的钢管舞是rotateY: 旋转飞刀的特技表演是rotateZ: 2.perspective属性,透视点,CSS3 3D transform的透视点是在浏览器的前方! 比方说,一个1680像素宽的显示器中有张美女图片,应用了3D transform,同时,该元素或该元素父辈元素设置的perspectiv

CSS3 3D transform变换

主要是看了这位大佬的文章,http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/,有的很大的收获,在上一个制作3D变形案例中明白了一些原理. 首先一个立体坐标系: 按照我的理解: 1.认识的突破口:rotateX, rotateY, rotateZ 3D transform中有下面这三个方法: rotateX( angle ) rotateY( angle ) ro

实用CSS3的transform实现多种动画效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="http://keleyi.com"> <title>实用CSS3的transform实现多种动画效果-柯乐义</title><base target="_blank" /> <s

css3动画transform在ie内核动画结束后子元素a标签不能点击(本人未解决,求大神带飞)

问题描述: css3的动画 animation属性,如果动画里面需要动画的元素是transform,那么动画的这个元素的子元素a标签就不能 点击跳转,也不能运行点击事件,就好像个a标签被透明的东西挡住了一样,目前只是发现这个问题在ie内核的浏览器上面,比如 360浏览器,ie11(考虑到测试css3动画的,没有测试ie789 10.).而在火狐,谷歌正常. 百度了一大堆,都没有找到好的解决办法,比较接近的一个说法是,transform属性改变了元素的层级,也就是z-index属性,不过在这里a标