重ね合わせの5つのルール

著者：Eve Cole 更新時間：2009-06-12 17:53:18

【テスト参加ブラウザ：IE6/IE7/IE8/FF3/OP9.6/SF3/Chrome2】
[オペレーティングシステム: Windows]

多くの学生が、なぜこの div が上の層にあり、あの div が下の層にあるのかという問題に夢中になっていて、z-index をどのように設定しても取得できないようです。彼らは嘔吐、下痢、吐き気、不眠症に悩まされ、最終的には憂うつ状態になります。レイヤーオーバーレイを自由に使用してください。ただし、インタラクションデザインではレイヤーの重ね合わせ効果が頻繁に現れるため、それを制御するには、その法則を習得する必要があります。

まず、この記事で使用する必要があるいくつかの概念を明確にします:

静的位置決め:position:static (position 属性のデフォルト値)。
動的位置決め: 位置:相対、位置:絶対、または位置:固定。
祖先要素: この要素を含む任意の要素。
親要素: この要素を直接含む祖先要素。
兄弟要素: 共通の親要素を共有する要素。

注: これらの概念は作成者によってカスタマイズされており、この記事でのみ使用されます。

引用:

ピア要素は非常に重要なキーワードなので、ここで詳しく説明する必要があります。

この例では、div#a と div#b は「兄弟要素」ではありません。同じ親 div#f を持つ div#b と div#c のような要素のみが「兄弟要素」と呼ばれます。

引用

終了

これら 5 つのルールを見てみましょう:

ルール 1: 兄弟要素が同じ方法で配置され、z-index 設定がない場合、html は後者の要素の上に配置されます。

ルール 2: 兄弟要素の両方が動的に配置され、z-index 設定がある場合、z-index 値が大きい方が最初に配置されます。

ルール 3: 兄弟要素がさまざまな方法で配置されている場合は、それらを動的に先頭に配置します。

ルール 4: 非兄弟要素、それらのいずれか 1 つとその祖先要素に動的レイアウトがない場合、html が優先されます。

ルール5 : 【重要】非兄弟要素またはその祖先要素が動的配置されている場合、動的配置されている祖先要素を同時に上方向に検索し、最上位の祖先要素(またはそれ自体)を取り出します。比較。。

ケース 1:子要素の z-index がどれほど大きくても、より大きい親要素が最初に表示されます。

ケース 2:親要素を下に配置しますが、子要素を上に配置することもできます。

ケース 1 とケース 2 は拡張比較で結合されます。

コードボックスを実行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http ://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html" /> <meta name="author"; content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>ルール 5: 非兄弟要素、任意の要素またはその祖先要素に動的配置がある場合、動的に配置された祖先要素を上方向に検索し、比較のために最上位レベルの祖先要素 (またはそれ自体) を取り出します。 </title> </head> <style type="text/css"> div { font:12px/1.5 arial;} div 強い { color:#fff; } h3 強い{ color:#f00;} /*--- ブロックの形状を定義します ---*/ .div1, width:150px; border:1px; } .grandDiv1, .grandDiv2 { パディング:1px ボーダー:174px; 背景:#cf9; } #fcf; } /*--- 正方形のオフセット位置とテキスト位置を定義します ---*/ .grandDiv2 { margin-top:-50px; } .parentDiv2 { margin-top:-40px; -left: 85px; } .div2 { マージントップ:-20px; パディング-トップ: 30px; } .grandDiv2 .parentDiv2 .div2 { マージン: 0;} </style> <body> <h3>ルール 5<strong>(重要)</strong>: 非兄弟要素またはその祖先要素のいずれかが動的配置を持つ場合、それぞれは以下を参照します。動的に配置された祖先要素を同時に祖先要素の次のレベルに検索し、比較のために最上位の祖先要素 (またはそれ自体) を取り出します。 </h3> <p>ケース 1: 子要素の z-index がどれほど大きくても、より大きい親要素が最初に表示されます。 <p> <div class="parentDiv1" style="position:relative; z-index:2;"> .parentDiv1{position:relative;<strong>z-index:2</strong>} <div class=" div1">.div1{position:static}</div> </div> <div class="parentDiv2" style="position:relative;"> <div class="div2" style="位置:相対; z-インデックス:10000;">.div2{位置:相対;<strong>z-インデックス:10000</strong>}</div> .parentDiv2{位置:相対;<strong>z-インデックス: 1</strong>} </div> <p>ケース 2: 親要素が一番下にあり、子要素が一番上にあることもあります。 <p> <div class="parentDiv1"> .parentDiv1{position:staitc} <div class="div1" style="position:relative;">.div1{position:relative}</div> </div> < div class="parentDiv2"> <div class="div2">.div2{position:staitc}</div> .parentDiv2{position:staitc} </div> <p>ケース 1 とケース 2 を拡張比較と組み合わせたもの。 <p> <div class="grandDiv1" style="position:relative; z-index:3;"> .grandDiv1{position:relative;<strong>z-index:3</strong>} <div class=" parentDiv1"> .parentDiv1{position:staitc} <div class="div1" style="position:relative; z-index:10000;">.div1{position:relative;<strong>z-index:10000</strong> >}</div> </div> </div> <div class="grandDiv2"> <div class="parentDiv2" style="position:relative; z-index:4;"> <div class="div2 ">.div2{position:staitc}</div> .parentDiv2{position:relative;<strong>z-index:4</strong>} </div> .grandDiv2{position:static;} </div> < /body></html>
[Ctrl+A すべての選択のヒント: 最初にコードの一部を変更できます]

引用:

実際、最初の 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 のフラッシュやセレクトなど、カバーできない特殊なケースもあります。これらは、自分で関連する記事を検索することができます。