web-dev-qa-db-ja.com

別のdiv内のdivでz-indexを機能させることができません

ドロップダウンメニューを機能させようとしています。これは、LIにカーソルを合わせると表示されるDIVを含むLIで構成されます。境界線が重なるタブ効果を作成できるように、親を子の前に描画したいと思います。子供を親の後ろに引き寄せることができません。

次のコードにも同じ問題があります。

<div id="test_1">
    Test 1
    <div id="test_2">
        Test 2
    </div>
</div>

そしてCSS

#test_1 {
    border:1px solid green;
    width:200px;
    height:200px;
    background-color:#fff;
    position:relative;
    z-index:999;
}

#test_2{
    border:1px solid red;
    width:200px;
    height:200px;
    background-color:#fff;
    position:relative;
    top:-10px;
    left:-10px;
    z-index:900;
}

上記のコードは、test_1のFRONTにtest_2を描画します。 test_2をtest_1の後ろに描画したい。どうすればそれを行うことができますか？助けてくれてありがとう。

cssdrop-down-menuz-index
15
Cyrcle

配置されたコンテナには常に子が含まれます。コンテナ自体の下にコンテナのコンテンツを含めることはできません。 このテストファイル 私が（約7年前に）作成した状況を参照してください。

特に、紺色のdivは_z-index:-100_ですが、その_z-index:3_親コンテナーの下にも、その「叔父」（その兄弟）である別の_z-index:2_コンテナーの下にも表示されないことに注意してください。親）。

要素の_z-index_は、同じ位置に配置されたコンテナを使用する他の要素に関してのみ有効です。 _position:relative_を_test_1_に設定すると、その_z-index_は_z-index_の_test_2_とは異なる世界になります。最も近い方法は、_#test_2 { z-index:-1 }_を設定して、_#test_1_のコンテンツの下に表示されるようにすることです（ただし、背景の下には表示されません）。

36
Phrogz

Bootstrapモーダルについての一般的な例を挙げます。＃test_1が私の.modal-bodyであり、＃test_2が私のカスタム<select>ボックスであると考えてください。OK？＃test_2は＃test_1の内部。そのように単純です。

enter image description here

＃test_1 overflow計算されたプロパティが "auto"、 "scroll"、 "hidden"でないことを確認してくださいそうしないと、モーダルが<select>をカットしてしまいます。真ん中のボックスリスト。私の現在の.modal-bodyオーバーフローはinitialです

0
Matteus Barbosa