0

我正在尝试将“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;
}

我应该补充的一件事是标题位置应该是绝对的，因为我的需要

4

1 回答 1

1

删除所有小于 0 的 z-index 内容。您将所有内容都推到后台。Z-index 在堆栈中工作，因此由于 .nivo-caption 的父级小于 0，所以它被放置在后台。无论你给它什么 z-index，它的所有孩子也将在后台。此外，您的上课提醒不正确，您两次提醒 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;
}
于 2013-02-10T06:38:38.377 回答