css3的transform造成z-index無效如何解決-創(chuàng)新互聯

本篇內容主要講解“css3的transform造成z-index無效如何解決”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“css3的transform造成z-index無效如何解決”吧!

成都創(chuàng)新互聯是一家專業(yè)提供鶴山企業(yè)網站建設,專注與網站設計制作、成都網站制作、H5開發(fā)、小程序制作等業(yè)務。10年已為鶴山眾多企業(yè)、政府機構等服務。創(chuàng)新互聯專業(yè)網站建設公司優(yōu)惠進行中。

我想鎖表頭及鎖定列。昨天新找的方法是用css3的transform,這個應該在IE9以上都可以的。

只鎖頭效果很好，IE11下會小抖，但chrome下很穩(wěn)定停在那里。后來又加上鎖定列，發(fā)現列會蓋住表頭。

百度到這里《小心 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.

測試各各瀏覽器，正常了！

到此，相信大家對“css3的transform造成z-index無效如何解決”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯建站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！

分享標題：css3的transform造成z-index無效如何解決-創(chuàng)新互聯
URL鏈接：http://m.kartarina.com/article40/cciieo.html

成都網站建設公司_創(chuàng)新互聯，為您提供靜態(tài)網站、企業(yè)建站、網頁設計公司、ChatGPT、搜索引擎優(yōu)化、移動網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯