html - 子要素に親要素よりも高い z-index を与える方法

Question

z-indexing で小さな問題が発生しました。

ヘッダーがあり、その中にリンクがあります。ヘッダーの z-index は 5 で、リンクの z-index は 15 です。モーダルを開くと、暗いオーバーレイがヘッダーの上にあるはずなので、z-index を 10 にしました。問題ヘッダー内のリンクはオーバーレイの上にある必要がありますが、その背後にあります。リンクに相対位置を指定しましたが、何もしません。

誰でもこの問題を解決できますか?

Answer 1

z-index同じ親内の兄弟に相対的です。目的の効果を作成する<a>には、から取り出す必要があります。<header>

親がz-indexモーダルよりも低い場合、その中のすべてがモーダルの背後にあります。z-index

これを修正する方法を示すことができるように、jsFiddle なども添付してください。

Answer 2

他の誰かがこの問題を抱えている場合、考えられる解決策は次のとおりです。http://jsfiddle.net/flobar/r6zeoc0y/

私がしたことはheader、コンテナとして使用したことです。次に、オーバーレイの下と上にある必要がある要素をdiv、異なる で別々の要素に分けましz-indexた。またposition: absolute;、それらを 内に正しく配置していましたheader。同様に、子が親の z-index を継承するという問題に遭遇することはありません。