[テストに参加するブラウザ：IE6/IE7/IE8/FF3/OP9.6/SF3/CHROME2] 多くの学生は、このdivが上位にある理由について混乱しているようで、そのdivはZ-indexをどのように設定しても、狂った、嘔吐と下痢、吐き気と不眠症になります。 、レイヤーを自由に使用しないようにします。ただし、レイヤーの重ね合わせ効果は、インタラクティブなデザインで頻繁に表示されるため、それを制御するには、そのルールを習得する必要があります。 まず、記事で使用する必要があるいくつかの概念を明確にしましょう。 静的位置決め：位置：静的（位置プロパティのデフォルト値）。 動的ポジショニング：位置：相対または位置：絶対または位置：固定。 祖先の要素：この要素を含むすべての要素。 親要素：要素を直接含む祖先要素。 ピア要素：一般的な親要素を持つ要素。 注：これらの概念は著者によってカスタマイズされ、この記事でのみ使用されます。 引用： ピア要素は非常に重要な言葉であり、ここで詳しく説明する必要があります。 <div> この例では、div＃aとdiv＃bは「同時要素」ではありません。 引用の終わり これらの5つのルールを見てみましょう。 ルール1：ピア要素の位置決め方法が同じで、Zインデックス設定がない場合、HTMLは後者に依存しています。 コードボックスを実行します ルール2：同じ要素が両方とも動的に配置され、Zインデックス設定がある場合、最大のZインデックス値を持つものが上部です。 コードボックスを実行します ルール3：ピア要素の位置決め方法は異なり、動的なポジショニングが最優先事項です。 コードボックスを実行します 規則4：非同時要素、任意の要素とその先祖の要素に動的なレイアウトがない場合、HTMLは後者に依存しています。 コードボックスを実行します ルール5 ：[重要]非同時の要素のいずれかが動的な位置決めを持っている場合、それぞれが動的な位置決めの先祖要素を上向きに探し、それぞれが比較のために最高レベルの祖先要素（またはそれ自体）を取り除きます。 ケース1：子要素のZインデックスの大きさに関係なく、親要素は大きくなります。 ケース2：親要素は低く、子要素も高くなる可能性があります。 ケース1、ケース2と拡張比較。 コードボックスを実行します 引用： 実際、最初の4つのポイントはすべて基本的なものであり、5番目のポイントのみを理解するのが困難です。 <div id = "ab" style = "position：absolute;"> この例では、div＃a_inner5とdiv＃b_inner4のカスケード関係を比較しましょう。 親要素が低く、子要素も高くなる可能性がある場合、祖先の要素が動的なレイアウトを持っている場合、非ピア要素を使用することです。 HTML位置を通して。 引用の終わり もちろん、Flashなどの特別なケースがあります。これらはすべて、関連する記事を検索できます。
[オペレーティングシステム：Windows]
<div> </div>
<div id = "a"> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
<div id = "f">
<div> </div>
<div id = "b"> </div>
<div id = "c"> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
[ctrl+aすべての選択のヒント：最初にいくつかのコードを変更できます]
[ctrl+aすべての選択のヒント：最初にいくつかのコードを変更できます]
[ctrl+aすべての選択のヒント：最初にいくつかのコードを変更できます]
[ctrl+aすべての選択のヒント：最初にいくつかのコードを変更できます]
[ctrl+aすべての選択のヒント：最初にいくつかのコードを変更できます]
<div id = "a" style = "position：relative; z-index：100;">
<div id = "a_inner1">
<div id = "a_inner2">
<div id = "a_inner3" style = "position：relative; z-index：98;">
<div id = "a_inner4">
<div id = "a_inner5">
</div>
</div>
</div>
</div>
</div>
</div>
<div id = "b">
<div id = "b_inner1">
<div id = "b_inner2">
<div id = "b_inner3" style = "position：relative; z-index：99;">
<div id = "b_inner4">
</div>
</div>
</div>
</div>
</div>
</div>
祖先要素div＃abの次のレベルまで、div＃a_inner5の祖先要素は次のとおりです。 Div＃B、div＃b_inner1、div＃b_inner2、div＃b_inner3。
次に、動的な位置決めを持つ先祖の要素を分析します。ダイナミックポジショニングを含む祖先の要素は次のとおりです。
次に、最高レベルを取り出して比較します：Div＃a>＃div＃b_inner3。