画像カルーセルCSSの問題

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インデックスの追加：

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

この理由は.mb-scrollがrelativeとして位置づけされていることで、左の矢印の後に来ますDOMを使用し、左矢印の上にレンダリングします。両方にz-indexがないためです。