Z-indexレイヤリングの苦境

Question

私はCSSでひどいです、私と一緒に耐えてください。

3要素：.subscribe,#pictures,#menu。

これらの3つは、ピクチャの上に重ねて表示する必要があります（.subscribeと#menu）。 CSSは以下の通りです（すべてのセレクタは正しい）。私はちょうどz-indexと考えて、ポジショニングはそれを行うだろうが、それはうまくいきません。

明らかに間違っていますか？ありがとうございました。

#slideshow * { 
    margin: 0; 
    padding: 0; 
} 
#slideshow { 
    position: relative; 
    padding: 14px 0 15px; 
    width: 926px; 
    height: 335px; 
} 
#slideshow #pictures { 
    background: url('images/bg.jpg'); 
    width: 926px; 
    height: 335px; 
    left: 0; 
    overflow: hidden; 
} 
#slideshow #pictures li { 
    display: block; 
    position: absolute; 
    top: 0; 
    width: 926px; 
    z-index: -1; 
} 
#slideshow #pictures li img { 
    display: block; 
    position: relative; 
    bottom: 0; 
} 
#slideshow #menu { 
    list-style-type: none; 
    right: 0; 
    padding-top: 290px; 
    padding-right: 20px 
    position:relative; 
} 
#slideshow #menu li { 
    display: block; 
    float: right; 
    z-index: 3; 
} 
#slideshow #menu li a { 
    display: block; 
    font: 11px "Lucida Grande", "Verdana"; 
    text-decoration: none; 
    padding: 7px 0 7px 28px; 
    z-index: 3; 
    color: #ccc; 
    line-height: 14px; 
    vertical-align: middle; 
} 
#slideshow #menu li a:hover { 
    color: #fff; 
} 
#slideshow #menu li.current a { 
    font: 15px "Georgia"; 
    color: #fff; 
    padding: 5px 0 5px 28px; 
    line-height: 18px; 
} 
#slideshow #pictures .subscribe { 
    height: 91px; 
    width: 252px; 
    position: relative; 
    margin-top: 100px; 
    float: left; 
    bottom: 0; 
    z-index: 2; 
    background: url('images/SubscribeButton.png'); 
} 
#slideshow #pictures .subscribe:hover { 
    background: url('images/SubscribeButton-Dark.png'); 
} 

マークアップ：

<div id="slideshow">  
     <ul id="pictures"> 
     <li style="visibility: hidden; zoom: 1; opacity: 0; "> <a class="subscribe"></a><img src="style/images/sample1.jpeg" alt="Slide 1" title="Sample 1" style="display: none; width:926px; height:335px "></li> 
     <li style="visibility: hidden; zoom: 1; opacity: 0; "><a class="subscribe"></a><img src="style/images/sample2.jpeg" alt="Buenos Aires" title="Buenos Aires" style="display: none; width:926px; height:335px "></li> 
     <li style="visibility: hidden; zoom: 1; opacity: 0; "><a class="subscribe"></a><img src="style/images/Slideshow-Image1.jpg" alt="Our design team creates the perfect collections of white shirts each season" title="Creation" style="display: none; width:926px; height:335px "></li> 

     </ul> 

     <ul id="menu"> 
     <li><a href="style/images/sample1.jpeg">three</a></li> 
     <li><a href="style/images/sample2.jpeg">two</a></li> 
     <li><a id="first" href="style/images/Slideshow-Image1.jpg">one</a></li> 

     <li class="background" style="visibility: hidden; zoom: 1; opacity: 0; left: 0px; top: 188px; width: 166px; height: 28px; "><div class="inner"></div></li></ul> 
    </div> 

Answer 1

私はあなたが近くにいると思います。しかし、単純にするために、私はちょうどわずかに異なる要素（すなわち主要なコンテナ要素）にZ-インデックスを置くでしょう。 http://jsfiddle.net/irama/GwcsF/1/

キーのビットがあること：

#slideshow { 
    position: relative; 
} 

#slideshow #pictures { 
    left: 0; 
    z-index: 1; 
    position: absolute; 
} 

#slideshow #menu { 
    right: 0; 
    position:relative; 
    z-index: 3; 
} 

#slideshow #pictures .subscribe { 
    position:absolute; 
    bottom: 0; 
    z-index: 2; 
} 

大体あなたが探していたものということです

は、ここではコードでプレーをお持ちですか？どうやって行くのか教えてください！

Answer 2

すべての親DIV（画像がある）にはposition: relativeを使用する必要があります。そのDIVをオーバーレイするレイヤーは、親の中にネストし、CSS属性をposition: absoluteに設定する必要があります。

これは、ネストされたDIVタグを、その親の左上に座り、オーバーレイするように設定します。その後、z-indexが機能するはずです。

希望に役立ちます。

参考：http://css-tricks.com/3118-text-blocks-over-image/

Answer 3

ポスト関連するHTML、してください！

しかし、ブロックの内容はz-インデックスを取得しているように見えますが、これは「スタックコンテキスト」のためにしばしば機能しません。 Overlapping And ZIndexを参照してください。

HTMLに応じて、#picturesと#menuコンテナには、おそらくz-indexを設定する必要があります。