4

私は2つのレイヤーを持っています.1つは黒いオーバーレイです:

#overlay {
    background: rgba(0,0,0,0.7);
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 0;
    display: none;
}

もう1つは私のテキストコンテナです:

#wrap {
    z-index: 999
    width:600px;
    height:600px;
    border:5px solid black;
    display:none;
    color:red;
}

オーバーレイとコンテナを同時に表示させたい:

$(document).click(function () {
    $('#overlay').add('#wrap').fadeIn();
})​​

オーバーレイを 999 に設定し、コンテナを 999 に設定しましたが、テキスト コンテナは常にオーバーレイの下にz-indexあり0ますz-index。

デモはこちら

z-index最後に、オーバーレイをに設定する必要があることがわかりました-1。

オーバーレイz-indexを高く設定できないのはなぜですか?位置が固定されているためですか?

4

2 に答える 2

2

z-index#wrapフローポジショニングがあるため、は適用されません。ボックスは、少なくとも有効position: relative;になる前に持っている必要がありz-indexます。

また、z-index値にセミコロンがありません。それを作ってz-index: 999;、それは動作します。私のコードは以下の通りです：

#wrap {
    z-index: 999;
    width:600px;
    height:600px;
    border:5px solid black;
    background: #FFF;
    display:none;
    color:red;
    position: relative; }
于 2012-09-04T03:07:39.940 に答える
0

静的な位置付け（これがデフォルトです）を持つ要素は、z-indexプロパティの影響を受けません。その位置付けを、相対位置に変更します。

于 2012-09-04T03:08:41.977 に答える