Css z索引，在图像上显示标题
我正在使用页面上的wordpress revolution滑块http://meorboston.org/homepage 我希望标题“即将到来的事件”显示在滑块上。 滑块看起来有一个z索引：20，但是当我 .program_副标题{z-index:50；}它没有帮助 滑块的代码为：Css z索引，在图像上显示标题,css,z-index,Css,Z Index,我正在使用页面上的wordpress revolution滑块http://meorboston.org/homepage 我希望标题“即将到来的事件”显示在滑块上。 滑块看起来有一个z索引：20，但是当我 .program_副标题{z-index:50；}它没有帮助 滑块的代码为： <div class="home-slider-wrap"> <a href="#container" id="slide
<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>
如何将其放置在滑块上 你需要明白这一点 注：z索引仅适用于定位元素位置：绝对， 位置：相对，或位置：固定 所以在你的CSS中你可以添加
position: relative;
我将此添加到.program_子标题，但它不起作用。可以在旋转滑块上放置一些东西吗？