jquery - nivo slider 标题中的 z-index 问题

Question

我正在尝试将“nivo slider caption”置于顶部，但我做不到。 我用我的 html 结构和 css 代码制作了一个 fiddle 。 如果您单击标题，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

删除所有小于 0 的 z-index 内容。您正在将所有内容推到后台。 Z-index 在栈中工作，所以由于 .nivo-caption 的父级小于 0，它被放在后台。无论您给它的 z-index 是什么，它的所有子项也将在后台。另外，您的类(class)提醒不正确，您提醒了 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;
}