jQuery內容滑塊（更多的CSS）

Question

我有一個巨大的（對於我來說）與CSS的問題。 我正在使用Coda-Slider 2.0（這不是對我的原始問題的最佳解決方案 - 但更晚） 我重新調整了它的方式：滑塊右側的自定義選項卡，因此它看起來像一個有特色的內容滑塊。 當選項卡處於活動狀態時，它應該部分位於滑塊的主框架中。但它始終落後（我嘗試使用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李一（應該是在前面的.coda滑塊）

我感謝您的幫助。

問候， 我

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 */  
} 

你可能會再能消除你z-index上.perszlsdNav ul li a.current（也沒有任何位置設置）。