在nivo滑塊標題中使用z-index問題

Question

我試圖將「nivo滑塊標題」帶到頂端，但是我不能。 我從我的HTML結構和CSS代碼做了一個小提琴。 如果你點擊標題，javascript會警告你單擊的元素屬性，但它找不到標題。 請幫忙！ 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; 
} 

有一件事我要補充的是，標題位置應該是絕對是我需要

Answer 1

刪除所有的z-index的東西，小於0您搡一切都變成了背景。 Z-index工作在堆棧中，因此.nivo-caption的父級小於0，所以它放在後臺。無論您給出的Z指數如何，所有這些孩子都將處於後臺。此外，您的課堂警報不正確，您要提醒該ID兩次。

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; 
}