web-dev-qa-db-ja.com

子要素を親よりも高いz-indexにする方法は？

私はこのコードを持っていると仮定します：

<div class="parent">
    <div class="child">
        Hello world
    </div>
</div>

<div class="wholePage"></div>

このjsFiddle： http://jsfiddle.net/ZjXMR/

さて、上記の<div class="child">のhave<div class="wholePage">が必要ですが、jsFiddleでは、<div class="wholePage">の前に子要素がレンダリングされていることがわかります。

parentクラスpositionまたはz-indexを削除すると、すべて正常に機能します。これは私が必要とする正しい動作です： http://jsfiddle.net/ZjXMR/1/

z-indexで、ページから何も削除せずにそれを行うにはどうすればよいですか？

cssz-index
67
Afshin Mehrabani

これは、子のz-indexが親と同じスタッキングインデックスに設定されているため不可能です。

親からz-indexを削除するか、このように保つか、要素を子ではなく兄弟にすることで、すでに問題を解決しています。

55
Kyle

スタイルを削除せずに目的を達成するには、「。parent」クラスのz-indexを「.wholePage」クラスより大きくする必要があります。

.parent {
    position: relative;
    z-index: 4; /*matters since it's sibling to wholePage*/
}

.child {
    position: relative;
    z-index:1; /*doesn't matter */
    background-color: white;
    padding: 5px;
}

jsFiddle： http://jsfiddle.net/ZjXMR/2/

8
MythThrazz

親にz-index：-1またはopacity：0.99を指定します

5
Greg Benner

不可能はない。力を使います。

.parent {
    position: relative;
}

.child {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}
4
supermasher

子要素でより大きいz-indexとともに非静的位置を使用します。

.parent {
    position: absolute
    z-index: 100;
}

.child {
    position: relative;
    z-index: 101;
}
2
Priyanshu Chauhan

このコードを使用してみてください、それは私のために働いた：

z-index: unset;
1
Carlos Aleman