【テスト参加ブラウザ:IE6/IE7/IE8/FF3/OP9.6/SF3/Chrome2】
[オペレーティングシステム: Windows]
多くの学生が、なぜこの div が上の層にあり、あの div が下の層にあるのかという問題に夢中になっていて、z-index をどのように設定しても取得できないようです。彼らは嘔吐、下痢、吐き気、不眠症に悩まされ、最終的には憂うつ状態になります。レイヤーオーバーレイを自由に使用してください。ただし、インタラクションデザインではレイヤーの重ね合わせ効果が頻繁に現れるため、それを制御するには、その法則を習得する必要があります。
まず、この記事で使用する必要があるいくつかの概念を明確にします:
注: これらの概念は作成者によってカスタマイズされており、この記事でのみ使用されます。
引用:
ピア要素は非常に重要なキーワードなので、ここで詳しく説明する必要があります。
この例では、div#a と div#b は「兄弟要素」ではありません。同じ親 div#f を持つ div#b と div#c のような要素のみが「兄弟要素」と呼ばれます。
引用
終了これら 5 つのルールを見てみましょう:
ルール 1: 兄弟要素が同じ方法で配置され、z-index 設定がない場合、html は後者の要素の上に配置されます。
コードボックスを実行
[Ctrl+A ですべてのヒントを選択: 最初にいくつかのコードを変更できます]
ルール 2: 兄弟要素の両方が動的に配置され、z-index 設定がある場合、z-index 値が大きい方が最初に配置されます。
コードボックスを実行
[Ctrl+A すべての選択のヒント: 最初にコードの一部を変更できます]
ルール 3: 兄弟要素がさまざまな方法で配置されている場合は、それらを動的に先頭に配置します。
コードボックスを実行
[Ctrl+A すべての選択のヒント: 最初にコードの一部を変更できます]
ルール 4: 非兄弟要素、それらのいずれか 1 つとその祖先要素に動的レイアウトがない場合、html が優先されます。
コードボックスを実行
[Ctrl+A ですべてのヒントを選択: 最初にいくつかのコードを変更できます]
ルール5 : 【重要】非兄弟要素またはその祖先要素が動的配置されている場合、動的配置されている祖先要素を同時に上方向に検索し、最上位の祖先要素(またはそれ自体)を取り出します。比較。 。
ケース 1:子要素の z-index がどれほど大きくても、より大きい親要素が最初に表示されます。
ケース 2:親要素を下に配置しますが、子要素を上に配置することもできます。
ケース 1 とケース 2 は拡張比較で結合されます。
コードボックスを実行
ケース 1 とケース 2 を拡張比較と組み合わせたもの。
引用:
実際、最初の 4 つのポイントが基本ですが、5 番目のポイントだけがよりわかりにくいです。詳細な説明は次のとおりです。
この例では、div#a_inner5 と div#b_inner4 の間のカスケード関係を比較します。
それらが共有する祖先要素 div#ab の次のレベルまで、div#a_inner5 の祖先要素には、div#a、div#a_inner1、div#a_inner2、div#a_inner3、div#a_inner4 が含まれます。要素には、div#b、div#b_inner1、div#b_inner2、div#b_inner3 が含まれます。
次に、祖先要素間で動的配置を持つ要素を分析します。 div#a_inner5 の祖先要素間で動的配置を持つ要素は次のとおりです。 div#a、div#a_inner3 の祖先要素間で動的配置を持つ要素は次のとおりです。 div# b_inner3.
次に、比較のために最高レベルを取り出します: div#a > #div#b_inner3。
親要素が一番下にあり、子要素も一番上にある可能性がある場合、祖先要素が動的レイアウトを持つ場合、その比較はposition:staticとは無関係ですが、その祖先が使用されます。要素は html の位置によって比較できます。
引用終了
もちろん、IE6 のフラッシュやセレクトなど、カバーできない特殊なケースもあります。これらは、自分で関連する記事を検索することができます。