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

删除所有小于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;
}

nivo滑块标题中的z-index问题

1 个答案: