小編給大家分享一下CSS3怎么解決z-index不生效的問題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)整合營銷推廣、網(wǎng)站重做改版、雄縣網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、H5高端網(wǎng)站建設、商城建設、集團公司官網(wǎng)建設、成都外貿(mào)網(wǎng)站建設、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為雄縣等各大城市提供網(wǎng)站開發(fā)制作服務。

最近寫CSS3和js結合，遇到了很多次z-index不生效的情況：

1.在用z-index的時候，該元素沒有定位（static定位除外）

2.在有定位的情況下，該元素的z-index沒有生效，是因為該元素的子元素后來居上，蓋住了該元素，解決方式：將蓋住該元素的子元素的z-index設置為負數(shù)

下拉框例子：

1.蓋住的時候：

2.將下拉框的z-index設置為負數(shù)

代碼：

* {
    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為負數(shù)就行了*/
    z-index:-1;

}

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

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






    

        
一級菜單
            
                
二級菜單
                
二級菜單
                
二級菜單
            
        
        
一級菜單
            
                
二級菜單
                
二級菜單
                
二級菜單
            
        
        
一級菜單
            
                
二級菜單
                
二級菜單
                
二級菜單