1

次のマークアップがあります: http://jsfiddle.net/dy4TG/3/

<div class="slide-wrap">
    <div class="slide">
        <div class="text">Text here</div>
        <img src="image.jpg" />
    </div>
</div>

<div class="overlay"></div>

.slidediv は絶対に配置する必要があり、position .slide-wrap: relative を持つことになります。

.overlaydiv が画像と div の間にあることは可能.textですか? スタッキング コンテキストを次のようにする必要があります (最高から最低):

-文章

-かぶせる

-画像

ありがとう！

ここのライブ例: http://movable.pagodabox.com (スライドショーを調べます...この例の特定のコンテキストでは、「オーバーレイ」にはクラス「kineticjs-content」があり、.slidediv は#slides親 div の内部にあります。

4

2 に答える 2

2

重要なのは、すべてが絶対に配置されていることを確認することです。このようにして、任意の z-index を使用して、必要に応じてすべてを浮動させることができます。

CSS: 

.overlay {
    width: 20px;
    height: 20px;
    background: #fff;
    z-index: 50;
    position:absolute;
    top:0;
    left:50px;
}
img{
    z-index: 20;
    position:absolute;
    top:0;
    left: 5px;
    width:100px;
    height: 100px;
    background: #000;
}
.text {
    z-index: 999;
    color: #888;
    position:absolute;
    top:0;
    left: 5px;
}
.slide-wrap{
    position:relative;   
}
.slide{
    position:absolute;
    top:0;
    left:0;
    width:100px;
}​

jsfiddle リンク: http://jsfiddle.net/a7Apz/3

于 2012-08-18T02:48:58.450 に答える
0

あなたはにを与える必要があります、そしてあなたがそれをすべての上に置きたいのであればそれは最高のものでなければなりません。また、またはを指定してはなりません。これにより、テキストと画像がネストされた新しいスタッキングコンテキストが作成されます。同じスタッキングコンテキストにテキスト、画像、オーバーレイが必要です。z-index.textz-index.slide.slide-wrap

これがデモンストレーション用のjsfiddleです。そして、これがあなたのjsfiddleに適用される同じ考えです。

于 2012-08-18T03:02:37.443 に答える