Question

我正在实施位于this page基础的移动框。但是左侧导航箭头没有显示，我不知道为什么。 CSS如下所示，有什么建议吗？

 /*** Left & Right Navigation Arrows ***/
a.mb-scrollButtons {
display: block;
width: 45px;
height: 58px;
background: transparent url(../images/arrows.png) no-repeat;
position: absolute;
top: 50%;
margin-top: -29px; /* if you change the arrow images, you may have to adjust this (1/2 height of arrow image) */
cursor: pointer;
text-decoration: none;
outline: 0;
border: 0;
}

a.mb-scrollButtons.mb-left {
background-position: left top;
left: -15px;
}

a.mb-scrollButtons.mb-right {
background-position: right top;
right: -15px;
}

Answer 1

在左箭头中添加z-index将解决您的问题，如下所示：

a.mb-scrollButtons.mb-left {
    background-position: -1px 0;
    left: -15px;
    z-index: 1;
}

原因是.mb-scroll定位为relative并位于DOM中的左箭头之后，因此呈现在左箭头的顶部，因为它们都缺少z-index 1}}。

图像轮播CSS问题

1 个答案: