css - z-index，在图像上显示标题

Question

我在 http://meorboston.org/homepage 页面上使用 wordpress 革命 slider 我希望标题“即将发生的事件”显示在 slider 上。 slider 看起来有一个 z-index: 20 但是当我制作.program_subheader { z-index: 50;} 它没有帮助。

slider 的代码是:

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

我怎样才能把它放在 slider 上？

Answer 1

你需要明白这一点

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

所以在你的CSS中你可以添加类似

position: relative;