2

コンテナーがあり、コンテナー内に動的に生成された div があります。

HTML

<div id="overlay">
</div>
<div id="cont">
    <div id="e1">
        Some
    </div>
    <div id="e2">
        Content
    </div>
</div>

CSS

#cont{
    position: fixed;
    top:40%;
    left:20%;
    z-index:999;
    color:#a8a8a8;
}
#overlay{
    position:fixed;
    background: rgb(0,0,0);
    opacity: 0.5;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:1000;
}
#e2{
    z-index:1001;
}

この jsfiddle を確認してください: http://jsfiddle.net/UkbXU/

z-index 1000 と背景 rgba(0,0,0,0.5) のオーバーレイがあり、写真コンテナーはオーバーレイの背後にあります。オーバーレイの上にある要素は 1 つだけです。つまり、z-index 1001 です。他の要素があります。コンテナーでは、要素の強調表示効果を表示するためにこれを行います。ただし、z-index: 1001 でクラスを作成しても、要素がオーバーレイの上に表示されません。

1 つの要素の z-index をコンテナよりも大きく設定するにはどうすればよいですか?

4

2 に答える 2

7

overlay-divをcontent-divに移動する必要があります。

<div id="cont">
    <div id="overlay"></div>

    <div id="e1">
        Some
    </div>
    <div id="e2">
        Content
    </div>
</div>

位置＃e2は相対に設定する必要があります。http://jsfiddle.net/UkbXU/10/を参照してください

そうでなければ、＃contと#overlayの両方が新しいスタッキングコンテキストを作成しているため、それは不可能です。これらを再度マージすることはできませんでした。

于 2013-03-17T15:46:19.393 に答える
0

試す

#e2{
    z-index:1001;
    position: absolute;
}

それはトリックを作るはずです。

試していない場合：

#e2{
    z-index: 9999 !important;
    position: absolute !important;
    top: 0px; //you can change that
    left: 0px; //you can change that
}

それでも機能しない場合は、おそらく一部の JavaScript が、より大きな z-indes tahn 9999 を #overlay に設定しています。

于 2013-03-17T15:40:03.977 に答える