javascript - z-index 无效问题?
天蓬老师
天蓬老师 2017-04-11 12:27:38
[JavaScript讨论组]

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

如下代码:

    
                 
                      Prescriber
                 
               
               
               
  
                 
                     商品1
                 
               
                   商品2
               
               
                   商品3
               
               
                   商品4
               
   
                     
               
   
   
   #fixed_table_title{
       position: relative !important;
        z-index: 10000 !important;
   }
   #fixed-body{
           z-index: 100 !important;
position: relative !important;
   }            
           
           
           
    但是 改变 translate3d 属性移动的时候, thead 还是会被覆盖 ?                
天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回复(3)
PHPz

看看这个

PHPz

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

PHPz

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号