1. テキストの説明は次のとおりです:
A と B の 2 つのピアがあります。A の z-index は 888、B の z-index は 999 です。A の下に H があり、z-index は 1000 ですが、見つかりました。 H が B にないことは、階層を変更せずに H を B の上に配置できますか?
2. コードの説明は次のとおりです
リーリー3. スタイルは変更できますが、(A>H,B) の階層構造とその Z インデックスは変更できません。H を B より上にするにはどうすればよいですか?
＃＃＃４、重要なポイントを強調してください！ ！ ！ ！
(A>H,B) の階層構造とその z-index のみ変更できません。他のスタイル (位置、幅など) は自由に変更できます。 、高さ。お好みに合わせて変更したり、追加したりできます。、お好みに応じて減らします。」
(A>H,B) の階層構造とその z-index のみ変更できません。その他のスタイルは、位置、幅、高さを含めて自由に変更できます。自由に変更できます。自由に追加または削除できます。"
(A> の階層構造のみ) ;H,B) とその z-index は変更できません。位置、幅、高さなど、その他のスタイルは自由に変更できます。必要に応じて追加、必要に応じて減算してください。"
学习ing2017-06-20 10:08:21
仕様によれば、z-index は 位置決めされた要素 に適用されます。それ以外の場合、z-index の設定は無意味です。1 つは、現在の position属性不为relative スタックに設定することです。コンテキスト内のレベル (スタッキング コンテキスト)
; 2 つ目は、新しいスタッキング コンテキストを作成することです。 z-index は、値が高く設定されるほどユーザーに近づくことを意味しません。スタッキングコンテキスト
。
.p1p1p1 と .p2p1 では、後者の z-index (800) が前者 (10) よりも高くなりますが、これは前者が存在するスタック コンテキスト (.p1p1) の z-index (500) が原因です。は、コンテキスト (.p2p1) の z-index (400) よりも上位にあるため、前者は後者よりも上にあります。
コメントで
を設定しました。9>0 なので、img が一番上になります。
p{z-index:9;position:relative;}会建立一个新的堆叠上下文，和p同级的元素是0，img元素是9 -1実際、あなたの質問によると、位置属性を相対に変更すると、z-index属性が機能しなくなります。が満たされている場合、その理由は次のとおりです:
A、B、H のレベルは上記の通りです。888 < 999 なので、A と H は両方とも B よりも低くなります。
扔个三星炸死你2017-06-20 10:08:21
できません。 H と B は両方とも position: absolute であるため、z 軸上の絶対位置の要素のオフセットは、z-index で設定できる量よりもはるかに大きいと考えられます (絶対位置の要素は無限の Z オフセットがあります)。したがって、2 つの要素 H と B の z インデックスは実際には何の役割も果たしません。
削除後のコードは以下の通りですposition: absolute
リーリー
学习ing2017-06-20 10:08:21
まず、A、B、H はすべて絶対位置にあり、次に z-index、B>A、当然、B は A をブロックし、H は A の内側にあり、A に絶対位置しているため、当然 H をブロックします。方法は、z-index、A>B を設定することです。このレイアウトでは、H の z-index には実際の意味はありません (A がカバーされている限り、H もカバーされます)。 AにHが入っていない限り！
迷茫2017-06-20 10:08:21
この世界ではあらゆる要素z-index都声明了一个平面世界，平面世界的高度就是z-index的值。 而子元素的z-indexが比較されていると想像できます。
代言2017-06-20 10:08:21
外部の z-index が前者より小さい場合、前者の子ノードを後者を超えるようにする方法はありません。ただし、この場合、前者は後者をすべてブロックする可能性があります。したがって、ポスターはまだ H から A に変更されています。A から対応するレベル設定を取り出すと、効果を達成することができます
