jQuery内容滑块(更多关于CSS)

Question

我对CSS有一个很大的问题(目前对我来说)。我正在使用Coda-Slider 2.0 (对于我最初的问题，这不是最好的解决方案--但后来会更多)我按照我需要的方式重新设计了它的样式:在滑块的右边自定义标签，这样它看起来就像一个特色内容滑块。当标签处于活动状态时，它应该部分位于滑块的主机中。但它总是落后(我尝试使用z-index并在HTML中切换位置)。这里的Code for people想要帮助我:)

HTML代码：

<div class="coda-slider-wrapper">

    <div class="coda-slider preload" id="coda-slider-1">
        <div class="panel">
            <div class="panel-wrapper">
                <img src="images/cycle-img.jpg" />
            </div>
        </div>
        <div class="panel">
            <div class="panel-wrapper">
                <h2 class="title">Panel 2</h2>
                <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
                <div class="tabInfos"><a href="#Link">I am linked to ya</a></div>
            </div>
        </div>
    </div><!-- .coda-slider -->
<div id="coda-nav-1" class="perszlsdNav">
<ul>
    <li class="tab1 first">
    <a href="#1" class="current">
    <div>
        <h4>VfL Mühlbach - TSV Neckarbischofsheim</h4>
        Beim VfB Epfenbach sahen die Zuschauer
        zunächst ein ausgeglichenes Spiel.
    </div>
    </a>
    </li>
    <li class="tab2"><a href="#2"><div>
        <h4>VfL Mühlbach - TSV Neckarbischofsheim</h4>
        Beim VfB Epfenbach sahen die Zuschauer
        zunächst ein ausgeglichenes Spiel.
    </div></a></li>
</ul>
</div>
</div><!-- .coda-slider-wrapper -->

CSS-代码

    .coda-slider-wrapper { padding: 10px; width: 640px; background: #ccc; }

    .coda-slider {background: #fff;height: 246px;}

    /* Use this to keep the slider content contained in a box even when JavaScript is disabled */
    .coda-slider-no-js .coda-slider { overflow: auto !important; padding-right: 20px }

    /* Change the width of the entire slider (without dynamic arrows) */
    .coda-slider, .coda-slider .panel { width: 368px }


    /* Change margin and width of the slider (with dynamic arrows) */
    .coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 600px }
    .coda-slider-wrapper.arrows .coda-slider { margin: 0 10px }

    /* Arrow styling */
    .coda-nav-left a, .coda-nav-right a { background: #000; color: #fff; padding: 5px; width: 100px }

    /* Tab nav */
    .coda-nav ul li a.current { background: #39c }

    /* Panel padding */
    .coda-slider .panel-wrapper { padding: 0 }

    .panel {
        height: 246px;
    }

    /* Preloader */
    .coda-slider p.loading { padding: 20px; text-align: center }

/* Don't change anything below here unless you know what you're doing */

    /* Tabbed nav */
    .coda-nav ul { clear: both; display: block; margin: auto; overflow: hidden }
    .coda-nav ul li { display: inline }
    .coda-nav ul li a { background: #000; color: #fff; display: block; float: left; margin-right: 1px; padding: 3px 6px; text-decoration: none }

    /* Miscellaneous */
    .coda-slider-wrapper { clear: both; overflow: auto }
    .coda-slider { float: left; overflow: hidden; position: relative }
    .coda-slider .panel { display: block; float: left }
    .coda-slider .panel-container { position: relative }
    .coda-nav-left, .coda-nav-right { float: left }
    .coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }

    .perszlsdNav ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    div.perszlsdNav {
        float: right;
        z-index: 999999;
    }
    .perszlsdNav ul li {
        margin: 10px 0 0 0;
    }
    .perszlsdNav ul li.first {
        margin: 0;
    }
    .perszlsdNav ul li a {
        display: block;
        width: 262px;
        background: #fff;
        font-size: 10px;
        color: #08097e;
        height: 54px;
        text-decoration: none;
    }
    .perszlsdNav ul li a.current {
        display: block;
        width: 298px;
        margin: 0 0 0 -36px;
        background: #08097e;
        font-size: 10px;
        color: #fff;
        height: 54px;
        text-decoration: none;
        z-index: 9999999999999;
    }
    .perszlsdNav ul li a div {
        padding: 6px;
    }
    .perszlsdNav ul li a div h4 {
        font-size: 12px;
        font-weight: bold;
        margin: 0 0 5px 0;
        padding: 0;
    }

下面是：.perszlsdNav ul li a(应该在.coda-slider前面)

我很感谢你的帮助。

你好，我

Answer 1

在我看来，问题的一部分是您从未在perszlsdNav上设置position (除非我在代码中的其他地方遗漏了它)，所以z-index被忽略了。您需要设置一个relative或absolute位置，才能让z-index为您执行任何操作。

div.perszlsdNav {         
  float: right;         
  z-index: 999999; 
  position: relative; /* Add this for your z-index */    
}

然后，您可能能够在.perszlsdNav ul li a.current上消除您的z-index (它也没有任何位置设置)。