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分鐘看了文章，半小時解決問題，高興得想哭，我逝去的時間呀。。。。。