無法使用z-index CSS位置

它會自動生成兩個按鈕的下一個和上一個圖像。

我這樣的代碼： HTML：

<div class="slick-track slick-initialized slick-slider"> 
    <button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style=" 
    z-index: 999999 !important; 
">Next</button> 
</div>

CSS：

.slick-track { 
    position: relative; 
    top: 0; 
    left: 0; 
    display: block; 
} 

.slick-prev, .slick-next { 
    font-size: 0; 
    line-height: 0; 
    position: absolute; 
    top: 50%; 
    display: block; 
    width: 20px; 
    height: 20px; 
    padding: 0; 
    -webkit-transform: translate(0, -50%); 
    -ms-transform: translate(0, -50%); 
    transform: translate(0, -50%); 
    cursor: pointer; 
    color: #a94442; 
    border: none; 
    outline: none; 
    background: #337ab7; 
    color: rgba(111, 36, 36, 0); 
    z-index: 9999 !important; 
} 

.slick-next { 
    right: -25px; 
}

我檢查，並關閉所有的類親本具有包含z-index。我設置的字段z-index的最大數量：

<button>Next</button>。

你可以在這裏看到更多的信息：

來源

2016-11-09 vanloc

這個問題可能是在光滑的軌道內的頂部是光滑的，其次是，但華而不實，軌道本身是不可見的。我不確定這是否如此。 – mm759

嘗試過'overflow：visible！important' – weinde

@ weinde。我試過了。 '溢出：可見！重要的'不適合我。 – vanloc

裏有CSS錯誤：

字體大小設置爲0。
，而不是width ，向按鈕提供padding。

請以下更改CSS：

.slick-prev, .slick-next{  
    line-height: 4px; 
    position: absolute; 
    top: 50%; 
    display: block; 
    height: 20px; 
    padding: 10px; 
    -webkit-transform: translate(0, -50%); 
    -ms-transform: translate(0, -50%); 
    transform: translate(0, -50%); 
    cursor: pointer; 
    color: #a94442; 
    border: none; 
    outline: none; 
    background: #337ab7;color: #ffffff; 
    z-index: 9999; 
}

來源

2016-11-09 09:53:07

無法使用z-index CSS位置

回答

相關問題