CSSのz-index属性の使い方と階層tree_html/css_WEB-ITnoseの概念

CSS の z-index 属性 は、ノードのスタック順序を設定するために使用されます。これは、z-index の一般的な使用方法です。同時に、z-index 値を大きな値に設定すると、必ずしもノードが最前面に表示されるとは限りません。この記事では、いくつかの例を通して z-index の使用方法を分析します。

順序ルール

ノードに位置属性が設定されていない場合、ドキュメント フローの後ろにあるノードが前のノードをカバーします。

位置決めルール

Position が static に設定されている場合、ドキュメント フローの後ろにあるノードは前にあるフローティング ノードをカバーするため、position:static はノードのカバー関係に影響しません。

position が Relative (相対位置決め)、absolute (絶対位置決め)、または fix (固定位置決め) に設定されている場合、そのようなノードは、position 属性が設定されていないノード、または属性値が静的であるノードをカバーし、前者が設定されていることを示します。後者よりも高いデフォルト レベル

この順序ルールと位置ルールに従って、ここでは位置を設定しません。 A と B、ただし A の子ノード A -1 の位置を設定: 相対的。順序ルールに従って、B は A をカバーし、配置ルールに従って、A' が B をカバーします。ルール

位置属性を指定しないと、z-index をノード属性に追加します。

z-index 属性の W3C の説明には、z-index 属性のみが有効であると記載されています。ノードの位置属性が相対、絶対、または固定の場合

デフォルト値ルール

すべてのノードがposition:relativeで定義されており、z-indexが定義されていない場合。同じレベルでは区別はありません。ただし、z-index が 1 より大きいノードは、z-index が定義されていないノードをカバーします。負の z-index 値を持つノードは、z-index が定義されていないノードによってカバーされます。

検査により、position が相対、絶対、または固定に設定されている場合、および z-index が設定されていない場合、IE8 以降および W3C ブラウザー (以下、総称して) の z-index のデフォルト値が適用されることもわかりました。

親ルールから

Position:relative がノード A と B の両方で定義されており、ノード A の z-index がノード B の z-index より大きい場合の場合、A の子ノードは B の子ノードの前に配置される必要があります。

すべてのノードがposition:relative で定義されている場合、ノード A の z-index はノード B の z-index と同じになります。ですが、順序規則により、ノード B はノード A の前面を覆います。A の子ノードの z-index 値が B の子ノードの z-index 値より大きい場合でも、B の子ノードは依然としてノード A の前面を覆います。

多くの人は z-index を 9999 などの非常に大きな値に設定します。親ノードの影響を考慮しない場合、それは役に立ちません。それは乗り越えられないレベルです

レベル ツリーのルール レベルの比較と決定のために DOM 構造内の兄弟ノードが抽出されると思われるかもしれませんが、そうではありません。

位置は相対、絶対、または固定に設定され、z-index に整数値が割り当てられたノードが DOM とは異なる階層ツリーに配置され、表示されると考えられます。レベルは階層ツリー内の z-index を比較することで決定されます。 上の例を階層ツリーで表すと、次の図のようになります

A-1 (z-図では、index:0) は B-1 (z-index:1) よりも小さくなります。これは、階層ツリーでは A (z-index:2) と B-1 が同じレベルにあり、A の値が小さいためです。は B-1 より大きいです。親ルールに従って、A-1 は B-1 の前に表示されます。

参加ルール 2

上記の参加ルールは、ノードの位置属性が相対的、絶対的、または固定である限り、階層比較に参加できると考えていますが、実際には、すべてのノードが位置を持っている場合は正確ではありません。 :relative が定義され、z-index は整数値に設定されます。親ルールに従って、親ノードのレベルが子ノードのレベルを決定します。例では、A、B-1、 C は親ノードであり、順序ルールによれば、C は B-1 より前にあり、B-1 は A より前にあり、z が何であっても同じです。子ノードの -index 値は、すべての z-index 属性を削除すると、C-1-1-1 は B-1-1 の前、B-1 -1 は A-1 の前になります。親ノードでは、何か奇妙なことが起こります。IE6 および IE7 ブラウザの表示効果は変更されませんが、W3C ブラウザの子ノードは親からレベルを決定するのではなく、独自の Z インデックスに基づいて決定されます。デフォルト値ルールでは、IE6 / IE7 および W3C ブラウザで要素の z-index デフォルト値に違いがあるのは、位置が相対、絶対、または固定に設定され、z-index に整数が割り当てられる場合のみであると考えられます。値の場合、ノードは階層ツリーに配置されます。z-index がデフォルト値の場合、W3C ブラウザでは、A、B-1、および C-1-1 の z-index がドキュメントの兄弟ノード間でのみ比較されます。はすべて自動であり、レベル比較には参加しません。

IE6 と IE7 では、z-index のデフォルト値が 0 であるため、位置が設定されているノードも参加します。 no z-index は階層ツリーの比較に参加しません。DOM 内の兄弟ノードとの階層比較も実行します。例として、B- の位置属性を削除してみましょう。 1、W3C ブラウザは次の図を表示します。配置規則に従って、A と C は B-1 の前に表示され、順序規則に従って、C が A の前に表示されます。

IE6 と IE7 では、A と C-1-1 がposition:relative に設定されており、z-index のデフォルト値が 0 であるため、階層ツリーの比較にも参加するため、次のような効果が得られます。

転載元: CSS z-index 属性の使い方と階層ツリーの概念