jQuery 内容 slider (更多 CSS)

Question

我在 CSS 方面遇到了很大的(目前对我来说)问题。我正在使用 Coda-Slider 2.0 (这不是我最初问题的最佳解决方案 - 但后来更多)我按照我需要的方式重新设计了它: slider 右侧的自定义选项卡，所以它看起来像一个特色内容 slider 。当选项卡处于事件状态时，它应该部分位于 slider 的主框架中。但它总是落后(我尝试使用 z-index 并在 HTML 中切换位置)。在这里，人们想要帮助我的代码:)

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(也没有设置任何位置)。