无法使用z-index CSS位置

Question

我创建了一个光滑的轮播。

它会自动生成下一个和上一个图像的两个按钮。

我的代码是这样的： 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>。

您可以在此处查看更多信息：

Answer 1

CSS中有错误：

1. 字体大小设置为0.

2. 而不是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;
}