我正在使用页面http://meorboston.org/homepage上的wordpress revolution滑块
我想要标题＆即将发生的事件＆＃39;显示在滑块上。
滑块看起来像是有一个z-index：20但是当我制作时
.program_subheader { z-index: 50;}它没有帮助。
滑块的代码是：
<div class="home-slider-wrap">
<a href="#container" id="slider-continue"><i class="ss-navigatedown"></i></a>
<!-- START REVOLUTION SLIDER 4.6.0 fullwidth mode -->
<div id="rev_slider_45_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" style="margin:0px auto;background-color:#E9E9E9;padding:0px;margin-top:0px;margin-bottom:0px;max-height:900px;">
<div id="rev_slider_45_1" class="rev_slider fullwidthabanner" style="display:none;max-height:900px;height:900px;">
<ul> <!-- SLIDE -->
<li data-transition="random" data-slotamount="7" data-masterspeed="300" data-saveperformance="off" >
<!-- MAIN IMAGE -->
<img src="http://meorboston.org/wp-content/uploads/2014/09/MEOR-Boston-Map-No-Buttons-06-e1440928046181.png" alt="" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption tp-fade tp-resizeme"
data-x="0"
data-y="250"
data-speed="300"
data-start="500"
data-easing="Power3.easeInOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.1"
data-endelementdelay="0.1"
data-endspeed="300"
style="z-index: 2; max-width: auto; max-height: auto; white-space: nowrap;"><div class="tp-layer-inner-rotation very_large_text " style=" -moz-transform: rotate(2deg); -ms-transform: rotate(2deg); -o-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg); -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;">
<a href="http://meorboston.org/brandeis"><img src="http://meorboston.org/wp-content/uploads/2014/09/MEOR-Boston-Map-Brandeis-Button-02.png" alt="" data-ww="362" data-hh="290" style="width: 179.391111111111px; height: 290;"></a>
</div>
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption tp-fade tp-resizeme"
data-x="881"
data-y="469"
data-speed="300"
data-start="500"
data-easing="Power3.easeInOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.1"
data-endelementdelay="0.1"
data-endspeed="300"
style="z-index: 3; max-width: auto; max-height: auto; white-space: nowrap;"><div class="tp-layer-inner-rotation very_large_text " style=" -moz-transform: rotate(2deg); -ms-transform: rotate(2deg); -o-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg); -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;">
<a href="http://meorboston.org/bu"><img src="http://meorboston.org/wp-content/uploads/2014/09/MEOR-Boston-Map-BU-Button-03.png" alt="" data-ww="362" data-hh="290" style="width: 179.391111111111px; height: 290px;"></a>
</div>
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption tp-fade tp-resizeme"
data-x="858"
data-y="19"
data-speed="300"
data-start="450"
data-easing="Power3.easeInOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.1"
data-endelementdelay="0.1"
data-endspeed="300"
style="z-index: 4; max-width: auto; max-height: auto; white-space: nowrap;"><div class="tp-layer-inner-rotation very_large_text " style=" -moz-transform: rotate(2deg); -ms-transform: rotate(2deg); -o-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg); -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;">
<a href="http://meorboston.org/tufts"><img src="http://meorboston.org/wp-content/uploads/2014/09/MEOR-Boston-Map-Tufts-Button-05.png" alt="" data-ww="362" data-hh="290" style="width: 179.391111111111px; height: 84.2444444444445px;"></a>
</div>
</div>
<!-- LAYER NR. 4 -->
<div class="tp-caption tp-fade tp-resizeme"
data-x="984"
data-y="317"
data-speed="300"
data-start="450"
data-easing="Power3.easeInOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.1"
data-endelementdelay="0.1"
data-endspeed="300"
style="z-index: 5; max-width: auto; max-height: auto; white-space: nowrap;"><div class="tp-layer-inner-rotation very_large_text " style=" -moz-transform: rotate(2deg); -ms-transform: rotate(2deg); -o-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg); -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;">
<a href="http://meorboston.org/mit"><img src="http://meorboston.org/wp-content/uploads/2014/09/MEOR-Boston-Map-MIT-Button-04.png" alt="" data-ww="362" data-hh="290" style="width: 179.391111111111px; height: 84.2444444444445px;"></a>
</div>
</div>
</li>
<!-- SLIDE -->
<li data-transition="random" data-slotamount="7" data-masterspeed="300" data-saveperformance="off" >
<!-- MAIN IMAGE -->
<img src="http://meorboston.org/wp-content/uploads/2014/09/MEOR-Boston-Map-No-Buttons-06-e1440928046181.png" alt="" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption tp-fade tp-resizeme"
data-x="0"
data-y="250"
data-speed="300"
data-start="500"
data-easing="Power3.easeInOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.1"
data-endelementdelay="0.1"
data-endspeed="300"
style="z-index: 2; max-width: auto; max-height: auto; white-space: nowrap;"><div class="tp-layer-inner-rotation very_large_text " style=" -moz-transform: rotate(2deg); -ms-transform: rotate(2deg); -o-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg); -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;">
<a href="http://meorboston.org/brandeis"><img src="http://meorboston.org/wp-content/uploads/2014/09/MEOR-Boston-Map-Brandeis-Button-02.png" alt="" data-ww="362" data-hh="290" style="width: 179.391111111111px; height: 290;"></a>
</div>
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption tp-fade tp-resizeme"
data-x="881"
data-y="469"
data-speed="300"
data-start="500"
data-easing="Power3.easeInOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.1"
data-endelementdelay="0.1"
data-endspeed="300"
style="z-index: 3; max-width: auto; max-height: auto; white-space: nowrap;"><div class="tp-layer-inner-rotation very_large_text " style=" -moz-transform: rotate(2deg); -ms-transform: rotate(2deg); -o-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg); -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;">
<a href="http://meorboston.org/bu"><img src="http://meorboston.org/wp-content/uploads/2014/09/MEOR-Boston-Map-BU-Button-03.png" alt="" data-ww="362" data-hh="290" style="width: 179.391111111111px; height: 290px;"></a>
</div>
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption tp-fade tp-resizeme"
data-x="858"
data-y="19"
data-speed="300"
data-start="450"
data-easing="Power3.easeInOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.1"
data-endelementdelay="0.1"
data-endspeed="300"
style="z-index: 4; max-width: auto; max-height: auto; white-space: nowrap;"><div class="tp-layer-inner-rotation very_large_text " style=" -moz-transform: rotate(2deg); -ms-transform: rotate(2deg); -o-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg); -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;">
<a href="http://meorboston.org/tufts"><img src="http://meorboston.org/wp-content/uploads/2014/09/MEOR-Boston-Map-Tufts-Button-05.png" alt="" data-ww="362" data-hh="290" style="width: 179.391111111111px; height: 84.2444444444445px;"></a>
</div>
</div>
<!-- LAYER NR. 4 -->
<div class="tp-caption tp-fade tp-resizeme"
data-x="984"
data-y="317"
data-speed="300"
data-start="450"
data-easing="Power3.easeInOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.1"
data-endelementdelay="0.1"
data-endspeed="300"
style="z-index: 5; max-width: auto; max-height: auto; white-space: nowrap;"><div class="tp-layer-inner-rotation very_large_text " style=" -moz-transform: rotate(2deg); -ms-transform: rotate(2deg); -o-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg); -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;">
<a href="http://meorboston.org/mit"><img src="http://meorboston.org/wp-content/uploads/2014/09/MEOR-Boston-Map-MIT-Button-04.png" alt="" data-ww="362" data-hh="290" style="width: 179.391111111111px; height: 84.2444444444445px;"></a>
</div>
</div>
</li>
</ul>
<div class="tp-bannertimer"></div> </div>
<script type="text/javascript">
标题是：
<div class="program_subheader">Upcoming Events</div>
如何将它放在滑块上？
答案 0 :(得分：0)
您需要了解
注意：z-index仅适用于定位元素（位置：绝对值， position：relative，或position：fixed）。
所以在你的CSS中你可以添加像
position: relative;