Fatal编程技术网
  • javascript/
  • Javascript z-index未在标题下创建滑块

Javascript z-index未在标题下创建滑块

javascript jquery html css wordpress

Javascript z-index未在标题下创建滑块,javascript,jquery,html,css,wordpress,Javascript,Jquery,Html,Css,Wordpress,我对WordPress模板有问题，该模板不允许我将滑块放在标题ID下面 我到处找过，但我做的每件事都不管用 标题CSS #header { background: rgba(0, 0, 0, 0.7); width: 100%; height: 212px; margin: 0px auto 0px auto; z-index: 1; position: relative; } 滑块主CSS #contback { background:

我对WordPress模板有问题，该模板不允许我将滑块放在标题ID下面

我到处找过，但我做的每件事都不管用

标题CSS

#header {
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 212px;
    margin: 0px auto 0px auto;
    z-index: 1;
    position: relative;
}
滑块主CSS

#contback {
    background: rgba(0, 0, 0, 0.4);
    margin-bottom: 0px;
    width: 100%;
    z-index:0;
    position: relative;
}
html太长，无法在这里发布，所以我只发布主要部分

!-- ### BODY #### -->
<body class="home page page-id-11 page-template-default logged-in admin-bar no-customize-support"> 

<!-- Header -->
<div id="header">
    <div class="header-row fixed">  

        <div id="logo">
            <a href="http://radiobreakout.com.au"><img src="http://radiobreakout.com.au/wp-content/themes/beaton/images/logo.png" alt="logo" /></a>
        </div><!-- end #logo -->


    <div id="evhead">
        <div class="evhead-cont">
            <a href="http://radiobreakout.com.au/?event=radio-breakout">
                <div class="evhead-bg"></div>
                <img src="http://radiobreakout.com.au/wp-content/themes/beaton/images/no-cover/evhead.png" alt="no-cover" />
                <div class="evhead-date">01 Jan</div>
                <div class="evhead-week">Friday</div>
                <div class="evhead-loc"><span></span></div>
            </a>
        </div><!-- end .evhead-cont -->
    </div><!-- end #evhead -->    
    </div><!-- end .header-row fixed -->

    <div id="menu">
    <div class="menu-row">

<div id="wizemenu" class="menu-main-container"><ul class="megamenu"><li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-11 current_page_item active"><a href="http://radiobreakout.com.au/">Home</a></li>
</ul></div> 
    </div><!-- end .menu-row -->
    </div><!-- end #menu -->
</div><!-- end #header -->



<script type="text/javascript">
jQuery(document).ready(function($) {

    $("#radio").flashradio({
        themecolor: "#00cab6",
        channelurls: "163.47.16.24:8000/stream",
        scroll: "AUTO",
        autoplay: "TRUE",
        html5chrome: "TRUE",
        debug: "TRUE",
        startvolume: "100"
    });

    $(".radio-wz-open-hidden").click(function() {
        $("#radio-wz #radio-wz-col").slideToggle({
            direction: "up"
        }, 100);
        $(this).toggleClass("clientsClose");
    });
    $("#radio-wz-col").show();

    function mouseHandler(e) {
        if ($(this).hasClass("radio-wz-hidden-open")) {
            $(this).removeClass("radio-wz-hidden-open");
        } else {
            $(".radio-wz-hidden-open").removeClass("radio-wz-hidden-open");
            $(this).addClass("radio-wz-hidden-open");
        }
    }

    function start() {
        $(".radio-wz-open-hidden").bind("click", mouseHandler);
    }
    $(document).ready(start);

});
</script>

<div id="radio-wz">
    <div id="radio-wz-hide">
        <div class="radio-wz-open-hidden"></div>    
    </div><!-- end #radio-wz-hide -->
    <div id="radio-wz-col">
        <div id="radio-wz-source">
            <div id="radio" style="height:54px; width:1190px;"></div>
        </div><!-- end #radio-wz-source -->
    </div><!-- end #radio-wz-col -->
</div><!-- end #radio-wz -->

<!-- ContBack -->
<div id="contback">
<div id="slider">
    <div id="slider-full">
        <ul>
            <li data-transition="random" data-masterspeed="1500" data-delay="10000" data-thumb="http://radiobreakout.com.au/wp-content/uploads/2015/11/nonestophitz.jpg">
                <img src="http://radiobreakout.com.au/wp-content/uploads/2015/11/nonestophitz.jpg" alt="NONSTOP HITS" data-kenburns="on" data-duration="15000" data-ease="Linear.easeNone" data-bgfit="110" data-bgfitend="100">
                <div class="sld-bg"></div>
                <div class="tp-caption" data-x="20" data-speed="1100" data-start="1500" data-easing="Linear.easeNone" data-endspeed="500" data-endeasing="Power4.easeIn" style="z-index:3; max-width:350px; white-space: normal !important;">
                    <div class="sld-full">
                        <div class="sld-full-title">NONSTOP HITS</div>
                            <div class="sld-full-desc"></div>
                            <div class="sld-full-date">Wednesday, 18 November 2015</div>
                        </div>
                </div><!-- end .tp-caption -->
            </li><!-- end li.slide -->
            <li data-transition="random" data-masterspeed="1500" data-delay="10000" data-thumb="http://radiobreakout.com.au/wp-content/uploads/2015/11/melbourne.jpg">
                <img src="http://radiobreakout.com.au/wp-content/uploads/2015/11/melbourne.jpg" alt="Melbourne Slide" data-kenburns="on" data-duration="15000" data-ease="Linear.easeNone" data-bgfit="110" data-bgfitend="100">
                <div class="sld-bg"></div>
                <div class="tp-caption" data-x="20" data-speed="1100" data-start="1500" data-easing="Linear.easeNone" data-endspeed="500" data-endeasing="Power4.easeIn" style="z-index:3; max-width:350px; white-space: normal !important;">
                    <div class="sld-full">
                        <div class="sld-full-title">Melbourne Slide</div>
                            <div class="sld-full-desc"></div>
                            <div class="sld-full-date">Wednesday, 18 November 2015</div>
                        </div>
                </div><!-- end .tp-caption -->
            </li><!-- end li.slide -->
            <li data-transition="random" data-masterspeed="1500" data-delay="10000" data-thumb="http://radiobreakout.com.au/wp-content/uploads/2015/11/sydey-1300x580.jpeg">
                <img src="http://radiobreakout.com.au/wp-content/uploads/2015/11/sydey-1300x580.jpeg" alt="Shows" data-kenburns="on" data-duration="15000" data-ease="Linear.easeNone" data-bgfit="110" data-bgfitend="100">
                <div class="sld-bg"></div>
                <div class="tp-caption" data-x="20" data-speed="1100" data-start="1500" data-easing="Linear.easeNone" data-endspeed="500" data-endeasing="Power4.easeIn" style="z-index:3; max-width:350px; white-space: normal !important;">
                    <div class="sld-full">
                        <div class="sld-full-title">Shows</div>
                            <div class="sld-full-desc">shows</div>
                            <div class="sld-full-date">Wednesday, 18 November 2015</div>
                        </div>
                </div><!-- end .tp-caption -->
            </li><!-- end li.slide -->  
        </ul>
    </div><!-- end #slider-full -->
</div><!-- end #slider -->  

！--###正文-->

  • 


jQuery（文档）.ready（函数（$）{
$（“#收音机”）。flashradio({
颜色：“00cab6”，
channelURL：“163.47.16.24:8000/流”，
滚动：“自动”，
自动播放：“正确”，
html5chrome：“真实”，
调试：“真”，
startvolume：“100”
});
$（“.radio wz open hidden”）。单击（函数（）{
$（“#radio wz#radio wz col”）。幻灯片切换({
方向：“向上”
}, 100);
$（this.toggleClass（“clientsClose”）；
});
$（“#radio wz col”）.show（）；
功能鼠标手柄（e）{
if（$（this）.hasClass（“radio wz hidden open”））{
$（this.removeClass（“radio wz hidden open”）；
}否则{
$（“.radio wz hidden open”）.removeClass（“radio wz hidden open”）；
$（this.addClass（“radio wz hidden open”）；
}
}
函数start（）{
$（“.radio wz open hidden”）.bind（“单击”，鼠标手柄）；
}
$（文档）.ready（开始）；
});

    

  • 
无休止的打击
2015年11月18日，星期三

    • 

  • 
墨尔本滑梯
2015年11月18日，星期三

    • 

  • 
显示
显示
2015年11月18日，星期三

    •
不透明度正在改变您的堆叠顺序，因此在这种情况下，z索引不可用。查看此链接了解更多信息。

试着让它更负面<代码>z索引：-9999一把小提琴会有帮助，解决CSS问题的最好办法：）负z索引不是好的做法。你已经得到了数百万个正值，很可能是因为：标题和滑块处于不同的堆叠上下文中。我正在研究代码，这是一项艰巨的任务，我看到标题已经很好地关闭，然后返回。比这种解释更多的事情正在发生。请制作一个jsfiddle.net向我们展示这个问题。虽然这个链接可以回答这个问题，但最好在这里包含答案的基本部分，并提供链接供参考。