2012-10-26 6 views
16

jQueryを使用してdivを作成します。ボタンをクリックすると、背景が0.8の不透明度を持つようになり、表示されたdivはユーザーにログインを許可します.z-私は4つのdivs(ヘッダー、コンテンツ、フッター、およびログインフォームのdiv)ヘッダーにはZ-インデックス:3とコンテンツのZ-インデックス:2がなければなりません - そうでなければ、シャドウは期待どおりに動作しません。z-indexは機能しませんか?

jQueryを使用すると、フルタブを含むbodyタグの後にdivを追加するので、不透明度を設定できますが、divのform-divよりもz-indexを高く設定する必要があります不透明 - しかしそれは動作しません。 form-divのz-indexは999、他のdivは5

z-indexの回避策などはありますか?

+2

確定的な回答を得るには、HTMLとCSSを参照する必要があります。 – Dancrumb

+0

Z-インデックスは難しいです。要素でZ-索引を「使用」できるようにする必要があります。 'position:relative;'ドキュメントフローの中に残したいアイテムと 'position:absolute;'ドキュメントフロー外のアイテムのための 'position:relative;'また、IE7には親のインデックスを基にしたz-インデックス「バグ」があり、親Z-インデックスはDOMの兄弟と比較されます。それは頭痛を引き起こす可能性があります。 – jmbertucci

+0

[なぜz-indexが機能しないのですか?](http://stackoverflow.com/q/9191803/1529630)、コードが存在しないためにわかりません。 – Oriol

答えて

39

要素の位置を変更します。

position: relative; 
+1

ここにドキュメントがあります:http://www.w3schools.com/cssref/pr_pos_z-index.asp – SamHuckaby

+0

既に試しました。-Sは動作しません。 –

+8

@SamHuckaby:これは "the"ドキュメントではありません。 W3SchoolsはW3Cではありません。実際のドキュメントは次のとおりです。http://www.w3.org/TR/CSS21/visuren.html#z-index – BoltClock

2

あなたのCSSにはpositionが定義されている必要があります。 z-indexをHTMLの通常の要素に実装したい場合は、position:relativeを要素に追加します。

4

古い質問ですが、誰かが解決策を探してくると私はとにかく投稿します。

z-indexは聞こえるほど簡単ではありません。 element1 = 999とelement2 = 1のz-indexを作成しても、必ずしもelement1が前面にくるわけではありません。

似たような状況が1回あり、要素が必要なときにzインデックスをjQueryに変更しても問題なく動作しました。これは、z-indexがあなたがそのインデックスを与えた時を気にしていることを意味します。値を999にしたい場合は、それを正面にしたいときにそれを与えてください。 これはそれを一番上に置くことができますが、他の規則、すなわち積み重ね順序がまだ適用されている可能性があります。これはここでカバーするにはかなり大きな話題ですので、ここで指摘します: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

4

親要素に関しては何かする必要があります。

オーバーフロー:可視。

それはあなたを行います。

+0

なぜこの答えがちょうど1つの投票(私)を得たか分からない。これはちょうど私の**を救った! –

+0

そして今、私はそれについて考えました、私は自分の問題がZ-インデックスではないことを実感しました。要素は、親から流出したため単純にカットされました( 'position:absolute'を使用して)。 –

+0

@GiladBarner喜んで私は助けることができます:) – steveluoxin

関連する問題