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 は変更できません。位置、幅、高さなど、その他のスタイルは自由に変更できます。必要に応じて追加、必要に応じて減算してください。"
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
仕様によれば、z-index は 位置決めされた要素 に適用されます。それ以外の場合、z-index の設定は無意味です。1 つは、現在の
position属性不为relativeスタックに設定することです。コンテキスト内のレベル (スタッキング コンテキスト); 2 つ目は、新しいスタッキング コンテキストを作成することです。 z-index は、値が高く設定されるほどユーザーに近づくことを意味しません。スタッキングコンテキスト
同じスタッキングコンテキスト内の要素は、z-index が高いほど、ユーザーに近くなります。
-
例は次のとおりです:
リーリー リーリー。
コメントで
を設定しました。9>0 なので、img が一番上になります。
リーリーp{z-index:9;position:relative;}会建立一个新的堆叠上下文，和p同级的元素是0，img元素是9 -1実際、あなたの質問によると、位置属性を相対に変更すると、z-index属性が機能しなくなります。が満たされている場合、その理由は次のとおりです:A、B、H のレベルは上記の通りです。888
できません。 H と B は両方とも
position: absoluteであるため、z 軸上の絶対位置の要素のオフセットは、z-index で設定できる量よりもはるかに大きいと考えられます (絶対位置の要素は無限の Z オフセットがあります)。したがって、2 つの要素 H と B の z インデックスは実際には何の役割も果たしません。削除後のコードは以下の通りです
効果:position: absoluteリーリーまず、A、B、H はすべて絶対位置にあり、次に z-index、B>A、当然、B は A をブロックし、H は A の内側にあり、A に絶対位置しているため、当然 H をブロックします。方法は、z-index、A>B を設定することです。このレイアウトでは、H の z-index には実際の意味はありません (A がカバーされている限り、H もカバーされます)。 AにHが入っていない限り！
この世界ではあらゆる要素
z-index都声明了一个平面世界，平面世界的高度就是z-index的值。 而子元素的z-indexが比較されていると想像できます。外部の z-index が前者より小さい場合、前者の子ノードを後者を超えるようにする方法はありません。ただし、この場合、前者は後者をすべてブロックする可能性があります。したがって、ポスターはまだ H から A に変更されています。A から対応するレベル設定を取り出すと、効果を達成することができます
親は子要素の位置を制限できません