2013-07-11 19 views
7

私はz-indexingで小さな問題に遭遇しました。子要素に親要素よりも高いz-インデックスを与える方法

私はヘッダーを持ち、その中にリンクがあります。 ヘッダーのZ-インデックスは5で、リンクのZ-インデックスは15です。 モーダルを開くと、ダークオーバーレイがヘッダーの上に表示されるため、Zインデックスに10を付けました。 問題は、ヘッダー内のリンクがオーバーレイの上にある必要がありますが、その背後にあることです。 私はリンクに相対的な位置を与えても、何もしません。

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

答えて

3

z-indexは、同じ親内の兄弟に関連しています。希望の効果を得るには、<header>から<a>を外さなければなりません。

親はモーダルよりz-index下を持っている場合は、その中のすべてのものは関係なく、子供たちのz-index

のもjsFiddleか何かので、我々はこの問題を解決する方法をお見せすることができますを添付してください、モーダルの後ろになります。

+0

javascriptを使用すると回避できますか? – flobar

+0

あなたがそれを親の内側の 'z-index'より低くしておかないといけません。しかしこれは私にプラグインがあることを思い出させるものです。[jQuery tools expose](http://jquerytools.org/documentation/toolbox/expose.html)これは時間を節約するかもしれません。 –

-1

親DIV z-indexを与えることができます:親divの内部にa要素を継承します。オーバーレイよりも高いz-インデックス。今まで誰にもこの問題がある場合は

+0

私はしません信じられない –

0

、ここでは可能なソリューションです:私は何http://jsfiddle.net/flobar/r6zeoc0y/

私はコンテナとしてheaderを使用しました。私は次に、オーバレイの下と上にある必要があった要素を別のdivと別のz-indexに分けました。私もposition: absolute;を使用して、header内に正しく配置しました。同様に、あなたは親のZ-インデックスを継承する子どもたちの問題にぶつからない。

関連する問題