个人中心
gpt4 book ai didi

javascript - z-index 没有在标题下制作 slider

转载 作者：行者123 更新时间：2023-11-28 06:50:40 25 4
gpt4 key购买 nike

我在使用 WordPress 模板时遇到问题，该模板不允许我将 slider 放置在标题 ID 下方。

我到处都看了，但我所做的一切都不起作用。

标题 CSS

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

slider 主要 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 -->

最佳答案

不透明度会改变您的堆叠顺序，因此在这种情况下 z-index 没有用。检查此链接以获取更多信息。 http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

关于javascript - z-index 没有在标题下制作 slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33791067/

25 4 0
文章推荐： html - figcaption 显示在 img 上，但 figcaption 边框在悬停时显示在图像后面
文章推荐： swift - CollectionView 摆脱列之间的间距
文章推荐： html - 文本未正确对齐
文章推荐： css - WordPress 画廊在鼠标悬停时更改图像
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com