Problème avec z-index dans la légende du slider nivo

Question

J'essaie d'ajouter "nivo slider legtion", mais je ne peux pas. J'ai fait un violon à partir de ma structure html et de mon code CSS. Si vous cliquez sur la légende, javascript alertera les propriétés des éléments sur lesquels vous avez cliqué, mais ne trouvera pas la légende. aidez s'il vous plaît! http://jsfiddle.net/BbHn4/

<div id="sliderWrap"> 
    <div class="slider-wrapper theme-h0mayun"> 
    <div class="ribbon"></div> 
    <div id="slider" class="nivoSlider" style="z-index:-1000"> 
     <img src="images/slider/176110test.png" data-thumb="images/slider/176110test.png" alt="" title="test" style="width: 850px; visibility: hidden; display: inline"> 
     <img class="nivo-main-image" src="images/slider/176110test.png" style="display: inline; width: 850px; height: auto"> 
     <div class="nivo-caption" style="display: block; position: absolute; top: 390px; left: 0px">test</div> 
     <div class="nivo-directionNav"> 
     <a class="nivo-prevNav">Prev</a> 
     <a class="nivo-nextNav">Next</a> 
     </div> 
    </div> 
    <div class="nivo-controlNav"> 
     <a class="nivo-control active" rel="0">1</a> 
    </div> 
    </div> 
</div> 

#slider { 
background-color: #2E4ADC; 
background-position: 50% 50%; 
border: 5px solid #295C94; 
border-radius: 15px; 
position: absolute; 
} 

#slider { 
z-index: -1 !important; 
} 
.theme-h0mayun .nivoSlider { 
background: url() 50% 50% no-repeat #FFFFFF; 
box-shadow: 0px 1px 5px 0px #4A4A4A; 
height: 430px; 
margin-bottom: 10px; 
overflow: hidden; 
position: relative; 
width: 550px; 
} 

.nivoSlider { 
height: 300px; 
margin: 0px auto 0px; 
overflow: hidden; 
position: relative; 
width: 900px; 
} 
.theme-h0mayun .nivoSlider img { 
display: none; 
left: 0px; 
position: absolute; 
top: 0px; 
} 

.nivoSlider img { 
left: 0px; 
max-width: none; 
position: absolute; 
top: 0px; 
} 

.nivoSlider { 
z-index: -1; 
} 

.nivo-caption { 
background: #000000; 
bottom: 0px; 
box-sizing: border-box; 
color: #FFFFFF; 
display: none; 
left: 0px; 
opacity: 0.8; 
overflow: hidden; 
padding: 5px 10px; 
position: absolute; 
width: 100%; 
z-index: 8; 
} 

.nivo-caption { 
height: 40px; 
margin-left: auto; 
margin-right: auto; 
z-index: 2000000 !important; 
} 

une chose que je dois ajouter que la position des sous-titres doit être absolue que mes besoins

Answer 1

Retirez tous vos trucs z-index qui est inférieur à 0. Vous enfourner tout en arrière-plan. Z-index fonctionne dans des piles, donc comme le parent de .nivo-légende est inférieur à 0, il est placé en arrière-plan. Tous les enfants de cela seront également en arrière-plan, peu importe l'indice z que vous lui donnez. En outre, votre alerte pour la classe est incorrecte, vous alertez l'ID deux fois.

Jfiddle: http://jsfiddle.net/BbHn4/1/

<div id="sliderWrap"> 
    <div class="slider-wrapper theme-h0mayun"> 
    <div class="ribbon"></div> 
    <div id="slider" class="nivoSlider"> 
     <img src="images/slider/176110test.png" data-thumb="images/slider/176110test.png" alt="" title="test" style="width: 850px; visibility: hidden; display: inline"> 
     <img class="nivo-main-image" src="images/slider/176110test.png" style="display: inline; width: 850px; height: auto"> 
     <div class="nivo-caption" style="display: block; position: absolute; top: 390px; left: 0px">test</div> 
     <div class="nivo-directionNav"> 
     <a class="nivo-prevNav">Prev</a> 
     <a class="nivo-nextNav">Next</a> 
     </div> 
    </div> 
    <div class="nivo-controlNav"> 
     <a class="nivo-control active" rel="0">1</a> 
    </div> 
    </div> 
</div> 

#slider { 
background-color: #2E4ADC; 
background-position: 50% 50%; 
border: 5px solid #295C94; 
border-radius: 15px; 
position: absolute; 
} 

.theme-h0mayun .nivoSlider { 
background: url() 50% 50% no-repeat #FFFFFF; 
box-shadow: 0px 1px 5px 0px #4A4A4A; 
height: 430px; 
margin-bottom: 10px; 
overflow: hidden; 
position: relative; 
width: 550px; 
} 

.nivoSlider { 
height: 300px; 
margin: 0px auto 0px; 
overflow: hidden; 
position: relative; 
width: 900px; 
} 
.theme-h0mayun .nivoSlider img { 
display: none; 
left: 0px; 
position: absolute; 
top: 0px; 
} 

.nivoSlider img { 
left: 0px; 
max-width: none; 
position: absolute; 
top: 0px; 
} 

.nivo-caption { 
background: #000000; 
bottom: 0px; 
box-sizing: border-box; 
color: #FFFFFF; 
display: none; 
left: 0px; 
opacity: 0.8; 
overflow: hidden; 
padding: 5px 10px; 
position: absolute; 
width: 100%; 
z-index: 8; 
} 

.nivo-caption { 
height: 40px; 
margin-left: auto; 
margin-right: auto; 
z-index: 2000000 !important; 
}