z-index 无效问题?

Question

我们知道，z-index 生效的条件之一就是元素的 position 要设置为 relative,absolute,或者 fixed 之一。

如下代码:

    <thead id="fixed_table_title" class="table-head">
                 <tr>
                      <th>Prescriber</th>
                 </tr>
               </thead>
               
               
  <tbody id="fixed-body" class="table-body" style="transition: -webkit-transform 0s ease-out; transform: translate3d(0px, -24.808px, 0px);">
                 <tr>
                     <td>商品1</td>
                 </tr>
               <tr>
                   <td>商品2</td>
               </tr>
               <tr>
                   <td>商品3</td>
               </tr>
               <tr>
                   <td>商品4</td>
               </tr>
   
               </tbody>      
               
   
   
   #fixed_table_title{
       position: relative !important;
        z-index: 10000 !important;
   }
   #fixed-body{
           z-index: 100 !important;
position: relative !important;
   }            
           
           
           
    但是 改变 translate3d 属性移动的时候， thead 还是会被覆盖 ?                

Answer 1

看看这个

Answer 2

你给tbody设置transform属性会创建一个新的stacking context，这个新建的比原来的要高一级，所以你设置再大的z-index也没用的，可以看看这个CSS3 Transform 引起的 z-index "失效"
深入理解css中的层叠关系

Answer 3

手机码字
无效原理见前几个回答、不能测试。看一下吧
不用定义 z-index ，所以把 position 也删了。
为 #fixed_table_title
定义 transform: translate3d(0px, 0px, 1px)
Z 轴比 tbody 高。

Answer 4

通过定义 transform: translate3d(0px, 0px, 1px)
亲测Safari有效，Chrome无效，已添加prefix

Answer 5

不用定义 z-index ，所以把 position 也删了。
为 #fixed_table_title
定义 transform: translate3d(0px, 0px, 1px)
Z 轴比 tbody 高。
这方式要想在chrome有效还要做多一步
就是html的结构要稍变一下
把thead与tbody的顺序调换一下就可以了

灵感来源于：https://www.jb51.net/css/2558...