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

私が追加する必要があることの1つは、キャプションの位置が私のニーズに合わせて絶対でなければならないということです

4

1 に答える 1

1

0 未満の z-index のものをすべて削除します。すべてをバックグラウンドに押し込んでいます。Z-index はスタックで機能するため、.nivo-caption の親は 0 未満であるため、バックグラウンドに配置されます。そのすべての子も、指定した z-index に関係なくバックグラウンドになります。また、クラスのアラートが正しくありません。ID を 2 回アラートしています。

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 に答える