1

子要素を持たない bxslider のコンテンツを注文する必要があります。画像と上部のテキストの間。

例えば

<div>
<ul id="slider">
<li><img src="image1.jpg" /><span>text</span></li>
</ul>
<div class="under-text-over-image"></div>
</div>

誰かがz-indexについてアドバイスできますか?

私の既存のcssは次のようになります:

li img{
position:relative;
z-index:1;
}
li span{
position:relative;
z-index:3;
}
.under-text-over-image{
position:relative;
z-index:2;
}

ありがとう

4

3 に答える 3

0

返信が遅くなりました... BXSlider には JS 内に zIndexing があります (詳細はこちらをご覧ください: http://bxslider.com/docs/jquery.bxslider.html )。スライドのちらつきを回避するために私が見つけた最良の方法は、表示される方向に関係なく、コンテンツを<ul>別の 内にネストすることです<div>。私の実験では、これにより、目に見えるレイヤーまたは不要な不可視レイヤーの気を散らすような並べ替えが発生することはないようです。

スライドの例を次に示します。

<ul class="bxslider">
<li>
    <div style="position:absolute;z-index:88888;">
        ... this content will be above everything else ...
    </div>
</li>
    <li>
    <div style="position:absolute;z-index:88888;">
        ... this content will be also be above ...
    </div>
</li>
</ul>

注: z-index を機能させるには位置宣言が必要です。

于 2014-03-17T16:24:26.370 に答える
0

私は次の行に沿って何かを試してみます:

li img{
position:relative;
z-index:-99999;
}

li span{
position:relative;
z-index:99999;
}

.under-text-over-image{
position:relative;
z-index:11111;
}

これらの線に沿ったものは、通常、z-index を使用するときに機能します。

これがお役に立てば幸いです。

于 2013-04-30T15:41:25.257 に答える