jquery - バックグラウンドでの jQuery スライドショー - 間違った CSS かもしれませんか?

Question

「ラッパー」divとその中に他の2つの要素があるこの非常に単純なhtmlがあります。

<div id="wrapper">
    <div id="logo">
     <img src="images/myLogo.jpg" />
    </div>
    <ul id="menu">
     <li class="class_link1"><a href="#">Menu item 1</a></li>
     <li class="class_link2"><a href="#">Menu item 2</a></li>
     <li class="class_link3"><a href="#">Menu item 3</a></li>
     <li class="class_link4"><a href="#">Menu item 4</a></li>
     <li class="class_link5"><a href="#">Menu item 5</a></li>
    </ul>
</div>

CSS を使用して、ロゴとメニューを画面下部の 1 つのバーに配置しました。

私の jQuery コードでは、div#wrapper の直後に別の div (#photos) を XML で動的に挿入します。したがって、私の最終的なhtmlは次のようになります。

<div id="wrapper">
    <div id="photos">
        <img src="photo1.jpg" alt="desc 1" />
        <img src="photo2.jpg" alt="desc 2" />
        ....
    </div>
    <div id="logo">
     <img src="images/myLogo.jpg" />
    </div>
   <ul id="menu">
     <li class="class_link1"><a href="#">Menu item 1</a></li>
     <li class="class_link2"><a href="#">Menu item 2</a></li>
     <li class="class_link3"><a href="#">Menu item 3</a></li>
     <li class="class_link4"><a href="#">Menu item 4</a></li>
     <li class="class_link5"><a href="#">Menu item 5</a></li>
    </ul>
</div> <!-- wrapper -->

CSSは次のとおりです。

#wrapper{
 position: relative;
 margin: 0px auto;
 padding: 0px;
 height: 685px;
 width: 1019px;
 z-index: 0;
}

#wrapper ul#menu {
 position: absolute;
 margin: 0px;
 padding: 0px;
 list-style: none;
 clear: both;
 left: 510px;
 top: 525px;
 z-index: 1;
}

#wrapper #logo {
 position: absolute;
 height: 72px;
 width: 510px;
 left: 0px;
 top: 525px;
 z-index: 1;
}

今必要なのは、背景に div#photos を使用してスライドショーを作成することです。メニュー バーとロゴは常に上部に配置する必要があります。Cycle プラグインを使用していますが、今のところ成功していません。どんな助けでも本当に感謝しています。

前もって感謝します、

ヘリオ

Answer 1

#photos { z-index: 1; }
#logo { z-index: 2; }

また、それほど具体的である必要はありません#wrapper #logo— ページごとに 1 つの ID しか持てないので、#logo十分なはずです。

Answer 2

ロゴに -1 の z-index を与えてみてください。