ボタンをクリックすると、jQueryを使用してdivを表示します->背景の不透明度が0.8になり、表示されたdivによってユーザーがログインできるようになります-z-indexを使用しない場合はすべて問題ありません。 4つのdiv(ヘッダー、コンテンツ、フッター、login-Formを使用したdiv)ヘッダーが必要ですが、z-index:3とcontent z-index:2が必要です。そうしないと、シャドウが期待どおりに機能しません。
JQueryを使用して、完全なサイドを含むbodyタグの後にdivを追加します。これにより、不透明度を設定できますが、form-divのZインデックスを、不透明度のあるdivのZインデックスよりも高く設定する必要があります。動作しません。 form-divのz-indexは999、他のdivは5
Z-indexの回避策や何か?
要素の位置を変更します。
position: relative;
親要素について何かを行う必要があります。
オーバーフロー:表示;
それで十分でしょう。
古い質問ですが、誰か他の人が解決策を探しに来たら、とにかく投稿します。
z-indexは、思ったほど単純ではありません。 element1 = 999とelement2 = 1にz-indexを作成しても、element1が前面に来るとは限りません。
同じような状況が1回ありました。要素を前面に配置する必要があるときに、jQueryを使用してz-indexを変更しましたが、問題なく動作しました。つまり、z-indexは、そのインデックスを与えたときに時間を考慮します。 999の値を指定する場合は、前面に表示したい時点で指定します。これにより上位にとどまる可能性がありますが、他のルールが適用される可能性があります。つまり、スタック順序です。これは非常に大きなトピックなので、ここで説明します。 http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ =
CSSでposition
が定義されていることを確認する必要があります。 HTMLの通常の要素にz-index
を実装する場合は、position:relative
を要素に追加します。