z-index の使用法についてわからないこと

今日の内容を始める前に、次のコードを見てみましょう:

リーリー リーリー

'

???すみません、div2_1 の z-index 値が 999 なのに、div1 の要素レベルよりも低いのはなぜですか? div1_1 の z-index 値は -100 ですが、それでも div1 より高いですか?心配しないで、ゆっくり聞いてください。

まず、何かに慣れていないときは、次の 3 つのことを理解する必要があります。 1. これは何ですか? 2. 何の役に立つのですか? 3. 使い方は？

これらの 3 つの手順に従って、z-index 属性についても説明します。まず第一、第二、これは何ですか。 Z-index は実際には CSS の一般的な属性で、主に要素の重なり順を設定するために使用されます。Web ページに 3 つの div が重なっている場合、それらは下から上に表示される必要があります。特定の順序を指定するにはどうすればよいですか? はい、一般的な Web 開発は 2 次元であり、CSS はレイアウトを改善するためにこの属性を導入します。

次に、これの使用方法を見てみましょう。まず概念的なものをいくつか紹介します。

1. z-index 属性は、要素のスタック順序を設定します。スタック順序が高い要素は常に、スタック順序が低い要素の前に配置されます

2. 同じレベルの要素の場合、デフォルトまたは位置: STATIC の場合、ドキュメント フローの後ろの要素が前の要素を上書きします

3. 同じレベルの要素について、位置が静的でなく、z-index が存在する場合、より大きな z-index を持つ要素がより小さな z-index を持つ要素をカバーし、z-index が大きくなるほど、優先度は高くなります

4. IE6/7 では、位置は静的ではなく、Z インデックスが存在しないため、Z インデックスは 0 になります。他のブラウザでは、Z インデックスは自動です。

5. z-index が auto である要素は、階層関係の比較に参加しません。この時点までの上向きのトラバースから、z-index が auto ではない要素は比較に参加します。

注: Position:static を設定した場合、要素は Position を設定しなかった場合と同じになり、スタッキング レベルには影響しません (次の例ではこれ以上説明しません。後続の Position は、デフォルトでは静的ではありません)

以下にいくつかの例を示します:

1. Z インデックスと位置が関係しない場合の要素の積み重ね順序:

上記 2 つの div のスタッキング ルールは、後ろのスタッキング レベルが前よりも高いということです。つまり、負のマージンを使用して div2 を div1 に移動すると、重なっている部分は div1 ではなく div2 として表示されます。 。そうすると、div2 の後に div3 を追加したらどうなるのかと質問する生徒もいます。このとき、後ろに div が何個あっても、レベルは div2 と同じになり、div2 より高くなることはありません

2. 位置は関係するが、Z インデックスは関係しない場合

例:

リーリー リーリー

リーリー リーリー

リーリー リーリー リーリー リーリー 最後に、z-index には負の値を指定できることを強調します。第 2 に、z-index の値は px を含まない整数である必要があります。多くの初心者は、幅と高さを記述することに慣れているため、z-index に px を追加します。第二に、z-index を使用する場合は、位置の値が固定であるか、絶対的であるか相対的であるかに関係なく、値が静的なレベルとレベルで同じです。ポジションなしが設定されます。

要約すると、上記の例は非常に厄介なようで、実際の状況でどのように使用するかはわかりません。個人的な経験から言うと、まずポジションがあるかどうかを見て、ポジションがない場合は階層を順番に見ていきます。位置がある場合は、親要素の子要素の z-index 値を設定するときは、親要素に z-index が設定されているかどうかに必ず注意してください。親要素は子要素のレベルに影響します。これは非常に重要ですが、最もよくある間違いでもあります。要素の z-index 値を最大値または最小値に設定しても機能しない場合は、親に従うという z-index の原則を十分に理解していないかどうかを確認したほうがよいでしょう。この記事とは関係のないことについて話しましょう。CSS スタイルはすべて継承されます。CSS の継承については、ゆっくりと理解する必要があります。

りー