jQuery Content Slider（more CSS）

Question

私は巨大な（現時点では）CSSの問題を抱えています。 私はCoda-Slider 2.0を使用しています（それは私のoriginnalyの問題には最適な解決策ではありませんが、後で詳しく説明します） 私は必要な方法でスタイルを変更しました：スライダの右側にあるカスタムタブ。 タブがアクティブなときは、タブの一部がスライダのメインフレームにある必要があります。しかし、それは常に遅れています（私はz-indexを使ってみて、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李（前である必要があり、人々は私を助けたい:)

HTMLコード用 そして、ここにコード.coda-sliderの）

私はあなたの助けに感謝します。

挨拶、 私

それは（私は他の場所のコードでそれをしないのですがない限り）あなたは perszlsdNav上 position設定されることはありませんので、 z-indexは無視されている問題の一部のように私には見えます

Answer 1

。 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に。