CSS3怎么解决z-index不生效的问题

小编给大家分享一下CSS3怎么解决z-index不生效的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联公司专注于企业全网整合营销推广、网站重做改版、雄县网站定制设计、自适应品牌网站建设、H5高端网站建设商城建设、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为雄县等各大城市提供网站开发制作服务。

最近写CSS3和js结合,遇到了很多次z-index不生效的情况:

1.在用z-index的时候,该元素没有定位(static定位除外)

2.在有定位的情况下,该元素的z-index没有生效,是因为该元素的子元素后来居上,盖住了该元素,解决方式:将盖住该元素的子元素的z-index设置为负数

下拉框例子:

1.盖住的时候:

CSS3怎么解决z-index不生效的问题

2.将下拉框的z-index设置为负数

CSS3怎么解决z-index不生效的问题

代码:





无标题文档

* {
    padding: 0;
    margin: 0;
    list-style: none;
}
.all {
    width: 330px;
    height: 120px;
    overflow: hidden;
    background: url(img/bg.jpg) no-repeat;
    margin: 100px auto;
    line-height: 30px;
    text-align: center;
    padding-left: 10px;
    margin-bottom: 0;
}
.all ul {
    position: relative;
    height: 30px;
    width: 100%;
}
.all ul li {
    width: 100px;
    height: 30px;
    background: url(img/libg.jpg);
    float: left;
    margin-right: 10px;
    position: relative;
    cursor: pointer;

}
.all ul ul {
    position: absolute;
    left: 0;
    top:-90px;
    /*display: none; 是一瞬间的事*/
    transition: all 1s;
    opacity: 0;
    /*后来的盒子会盖住前面的盒子,就算前面的盒子z-index再大也会被盖住,
    不过可以设置后来的盒子的z-index为负数就行了*/
    z-index:-1;

}

.all ul .lvTow {
    top:-90px;
    opacity: 0;
}

.all ul .show{
    top:30px;
    opacity: 1;
}






    
            
  • 一级菜单                              
  • 二级菜单
  •                 
  • 二级菜单
  •                 
  • 二级菜单
  •             
                 
  • 一级菜单                              
  • 二级菜单
  •                 
  • 二级菜单
  •                 
  • 二级菜单
  •                               
  • 一级菜单                              
  • 二级菜单
  •                 
  • 二级菜单
  •                 
  • 二级菜单
  •                           

    以上是“CSS3怎么解决z-index不生效的问题”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


    本文题目:CSS3怎么解决z-index不生效的问题
    本文URL:http://hbruida.cn/article/gddhdp.html

    其他资讯