智湖から転載、読んでたくさん稼いだ
昔は、なぜこのような問題を解決するためにz-index値を試したのかわかりませんでしたが、人々は999,9999に設定しましたが、これはまったく言葉のない言葉です。
コピーされたコンテンツには、いくつかのアニメーションとリンクが含まれています。表示できない場合は、元のテキストに移動できます。。。。
序文
最近、CSS3アニメーションを使用しているときにDOMスタッキングの問題が発生したため、z-indexを再学習しました。このCSSプロパティはかなり複雑だと感じています。この記事がz-indexの魅力を再理解するのに役立つことを願っています。
これは何が起こったのか（背景が少し長い）、私は最近次のリストページを書きました：
次に、CSS3アニメーションを各製品アイテムに追加します。アニメーション効果はおそらく次のようになります。デモアドレス
実装後の効果はおそらく次のようになります（スクリーンショットは少しあいまいです。デモアドレスをクリックして表示することをお勧めします）：
Chromeでの表示は正常ですが、Safariから開いたときにひどいことがわかりました。アニメーションが非常に動かなくなっています。
異なる製品アイテムを切り替えると、ページアニメーションが明らかに動かなくなっていることがわかります。これを考えれば、問題はないので、各製品アイテムに3Dアニメーションハードウェアアクセラレーションを追加しました。この方法も、次のように非常にシンプルです。
.item {
transform: translateZ(0); /* 或者 will-change: transform; */
}これは、ハードウェアアクセラレーションの一般的な最適化方法です。理解できない場合は、CSSを使用してハードウェアアクセラレーションを有効にし、Webサイトのパフォーマンスを向上させることができます。
Safariを開いた後、ページアニメーションが非常にスムーズで、ハードウェアアクセラレーションの最適化が成功したことがわかりましたが、この記事で説明したDOM要素のスタッキングの問題という新しい問題が発生しました。
アニメーション効果は修正されましたが、ページのDOM要素のスタックには問題があります。つまり、次の商品アイテムは上記の商品アイテムの右下隅にある入り口ポップアップをカバーし、通常の効果は次のようになるはずです。
このような問題が発生したとき、最初の反応：ポップアップボックスのZインデックスを増やします。これは簡単なことですが、Zインデックスの値をどのように調整しても、ポップアップボックスは常に以下の製品アイテムの影響を受けます。カバーして、最初は戸惑いました。
最後に、いくつかの資料を読んで調査し、最終的に解決策を見つけました。あまり意味のないことですが、Z-index関連の知識全体を調査し、最後に上記の問題の解決策を提出します。（以下の説明には多くのユースケースが付属しています。簡単に参照できるように、すべてのコードをjsfiddleに投稿します。読者はデモアドレスをクリックして例を表示できます）
z-indexの基本
最初にz-indexを紹介します。z-index属性は、z軸上の要素とサブ要素の順序を調整するために使用されます。要素が上書きされると、上にある要素と下にある要素が表示されます。一般的に言えば、Zインデックス値が大きい要素は、低い要素をカバーします。
z-indexのデフォルト値はautoです。正の整数または負の整数を設定できます。CSS3を考慮しない場合は、配置要素のz-index（位置：relative / absolute / fixed）のみが機能します。 -indexは、配置されていない要素に作用し（一部のCSS3も有効になります）、効果はありません。例：デモアドレス
DOM要素の配置を設定すると、要素のz-indexが有効になり、デフォルトはautoです。これを単純にz-indexと同等にすることができます：0（デモアドレスなど）、つまりz-indexが有効になります前提条件は、配置プロパティ（または一部のCSS3プロパティ）を有効にするために設定する必要があることです。
デモを読んだ後、困惑するかもしれません。なぜZ-index値を設定せずに位置プロパティのみを設定するのか、そして赤い四角が青い四角をカバーするのはなぜですか、これはZ-Indexスタッキングレベルの知識です。
スタッキングレベル
DOM要素は、スタッキングコンテキストに関係なく、スタッキングレベルに応じてz軸上の要素の表示順序を決定します。通常の言語では、異なるDOM要素が組み合わされてオーバーラップする場合、その表示順序カスケードレベルのルールに従い、要素の表示順序を調整するためにz-indexを使用して、要素が上下に浮動できるようにします。
では、カスケードレベルとは何でしょうか。以下は有名な7レベルのスタックレベル（スタックレベル）です。
要素が重なると、カスケードレベルがプレゼンテーションルールを調整することがわかりますこのルールでは、前の例の赤い正方形が青い正方形を覆う理由を説明することは難しくありません。position：relativeプロパティを設定すると、要素z-index：autoが有効になり、通常のインライン要素よりも高いスタックレベルが増加するため、赤い四角形が上部に表示されます。
カスケードレベルのルールを理解した後、いくつかの例を挙げて説明します。
inline / inline-block要素がフローティング要素よりも高い
1つ目は、inline / inline-block要素がフローティング要素よりも高いことです。デモアドレス
テキスト（インライン要素）が画像（フローティング要素）を覆っていることがはっきりとわかります。
inline / inline-block要素がブロック要素よりも高い
赤い正方形（インラインブロック）は緑色の正方形（ブロック）を覆っていますが、テキスト（表示：ブロック）はインラインレベルに属しているため、赤い正方形（インラインブロック）と同じレベルにあり、最初に来る（次で説明する）原則に従います。インラインブロック要素ではカバーされません。
要素の積み重ねレベルは同等です
次に、2つの要素が同じレベルで積み重ねられる場合、現時点では次の2つのガイドラインに従う必要があります。
- 後期原則
- 誰がZ-indexが大きく、誰がルールを守っているのか
後ろから追いつく原則：
後者のルールでは、要素が同じレベルでスタックされると、次のDOMが前のDOM要素を上書きします。これは理解しやすいですが、私はそれを説明する必要があります。後者の要素が前の要素をカバーする理由がよくわかるのはこのためです。
前の例と同様に、テキスト（display：block）は、赤い正方形（inline-block）と同じレベルであるインラインレベルに属しているため、後ろに来る（以下で説明する）原則に従い、インラインブロック要素ではカバーされません（ここでは）説明する別の例を掲載しません。
z-indexが大きく、誰が上がっているか：
z-indexが存在するため、同じスタッキングコンテキスト内の要素の順序を調整できます。負および正のz-index値の範囲では、DOM要素のz-index値はこれら2つの範囲内にあります値が大きいほど表示順位が高くなります。
スタックレベルを知った後、基本的に同じスタックコンテキスト内の要素の表示順序が決定されている限り、それらが異なるスタックコンテキストにある場合、どのように表示できますか？このカスケードコンテキストはどういう意味ですか？心配しないでください。
カスケードコンテキスト
カスケードコンテキスト、それはJSのスコープとして理解できます。ページには複数のカスケードコンテキストが存在することがよくあります（カスケードコンテキストを生成する方法はたくさんありますが、気付かないため）、カスケードコンテキストでは、要素をスタックするためのスタックレベルのルール。
カスケードコンテキストの概念を紹介した後、まずカスケードコンテキストを作成する方法を見てみましょう。
通常の状況では、カスケードコンテキストの作成には主に3つのタイプがあります。
- デフォルトでカスケードコンテキストを作成する
- カスケードコンテキストの作成をトリガーするには、Z-indexと連携する必要があります
- カスケードコンテキストの作成をトリガーするためにz-indexと連携する必要はありません
1つは、デフォルトでカスケードコンテキストを作成する
カスケードコンテキストはデフォルトで作成され、bodyタグとして理解できるHTMLルート要素のみが含まれます。これはルートカスケーディングコンテキスト要素に属し、トリガーするためにCSSプロパティを必要としません。
2つ目は、カスケードコンテキストの作成をトリガーするためにz-indexと連携する必要があります。
z-index値に依存してカスケードコンテキストを作成します。
- 位置の値は相対/絶対/固定です（一部のブラウザー）
- flexアイテム（親要素の表示はflex | inline-flex）、これは子要素であり、スタックコンテキストを作成するための親要素ではないことに注意してください
これらの2つのケースでは、特定のz-index値を設定する必要があり、z-indexをautoに設定できません。これは、z-index：autoとz-index：0のわずかな違いです。
前述のように、position：relativeを設定すると、z-indexの値が有効になりますが、現時点では、スタッキングコンテキストは作成されません。z-indexがautoに設定されていない場合、z-index：0を設定しても要素がトリガーされますカスケードコンテキストを作成します。
3つ目は、カスケードコンテキストの作成をトリガーするためにz-indexと連携する必要がない
この場合、基本的にはCSS3の新しいプロパティによってトリガーされます。一般的なプロパティは次のとおりです。
- 要素の不透明度が1未満です
- 要素のmix-blend-mode値が正常ではありません
- 要素の次の属性の値はnoneではありません。
- 変身
- フィルタ
- 展望
- クリップパス
- マスク/マスク画像/マスクボーダー
- 要素のisolution属性の値は分離されます
- 要素の-webkit-overflow-scrolling属性はtouchです
- 要素のwill-change属性には、カスケードコンテキストを作成する値があります
カスケードコンテキストの作成方法と作成方法の概念を紹介した後、カスケードコンテキストを作成した要素はローカルカスケードコンテキストを理解でき、子孫にのみ影響し、独自のカスケードレベルは親のカスケードコンテキストによって決定されることに注意してください。決定しました。
2つのDOM要素の表示順序を比較する
次に、2つのDOM要素の表示順序を比較する方法をまとめましょう。
- 同じスタッキングコンテキスト内にある場合、要素はスタッキングレベルのルールに従って表示されます。
- 異なるスタックコンテキストにある場合は、最初に共通の祖先スタックコンテキストを見つけてから、2つの要素が共通のスタックコンテキストの下にあるローカルスタックコンテキストのスタックレベルを比較します。
これらの2つの文には何千もの単語が要約されていますが、注意すべき点がたくさんあります。最初に最初の点を見てみましょう：
コカスケードコンテキスト
同じカスケードコンテキストにある場合、要素はカスケードレベルのルールに従って表示されます。これは、カスケードレベルを導入するときにすでに導入されています。親子関係の要素が同じカスケードコンテキストにある可能性が高いことに注意してください。この場合、下位レベルの要素のレベル比較も、カスケードレベルのルールに従って表示されます。
例：デモアドレス
.box要素とその子要素imgの比較：imgと.boxは同じスタックコンテキストに属しているため、img z-indexが-1であるため、親要素の下に沈みます。親要素は画像を覆いますが、imgはまだボディの背景色の上。7レベルのスタックレベルに従うため、下部はスタックコンテキスト（ボディ要素）の背景または境界である必要があります。
しかし、.box要素にローカルスタッキングコンテキストを作成させると、それは異なります。.box要素とimg要素も同じスタッキングコンテキストにありますが、.boxによって作成されたローカルスタッキングコンテキストに切り替えられます。
スタックコンテキストの背景色が常に最も低いため、img要素が.boxの背景色を覆っていることがわかります。スタックコンテキストはbody要素から.box要素に変わりますが、.boxの下のspan要素とimg要素の場合比較すると、インライン要素は負のZインデックスを持つ要素よりも高いため、2222が画像に表示されます。
この例を通して、親要素と子要素のスタックがローカルスタックコンテキストであるか、ローカルスタックコンテキストではない可能性が高いことを説明したいので、共通のスタックコンテキストを見つける必要があります。
異なるカスケードコンテキスト
これはより複雑であり、1つの文で要約することができます：犬と戦うのは飼い主に依存します。
ページの一般的なDOMツリーは次のようになります。Root、ParentX、ChildXはすべてスタックされたコンテキスト要素であり、ABCDの親要素である必要はありません。
- 要素がBまたはChildB要素と比較したいのですが、とても満足しています。それらは同じスタックコンテキスト（ChildB）に属しており、スタックレベルに従って判断します
- A要素がCまたはChildAと比較する場合は、それらの共通の祖先スタックコンテキスト（ParentB）を見つけ、それを見つけた後、祖先スタックコンテキストの下の2つの要素のローカルスタックコンテキスト（ここでは、ChildAおよびChildB）に従ってスタックレベルを比較します。比べる）
- 同様に、AがDと戦いたい場合は、祖先のスタックコンテキスト（ルート）を見つけ、ParentAとParentBのスタックレベルを比較します。
それは非常に単純ですか？ここに、2つの単純な例を示します。
例1：デモアドレス
childAのz-index：9999は非常に大きいですが、parentBまたはchildBと比較すると、比較する資格がありません。それは、その親であるparentAとのみ比較できます。parentAがparentBと比較されると、気がついたことがわかりました。あなたのz-indexは2で、私のものより大きく、失礼です。そのため、childAとparentAは、parentBの下に素直にいなければなりません。
例を少し変更した場合、parentAが新しいカスケードコンテキスト要素を作成しないようにします。デモアドレス
parentAがカスケードコンテキストを作成しなくなった場合、childAはchildBと比較したいので、parentAに限定されなくなり、直接parentBと比較します（childAとparentBは同じカスケードコンテキストにあるため）、明らかにchildAが一番上にあり、これもまたこれがchildAがparentBをカバーする理由です。
問題の解決策
理論的な知識が導入されました。上記の理論を理解していれば、この問題は簡単なはずです。ここでは、初期の問題の解決策を示します。
transform：translateZ（0）が各製品アイテムに追加されるため、各製品アイテムはスタッキングコンテキストを作成します。前述のルールによれば、各製品アイテムのDOM要素は、各商品アイテム（各部分的な積み重ねコンテキスト）、およびこれらの商品アイテムの積み重ねレベルは同じ（z-index：autoと同じ）であるため、2番目から最後までの原則に従い、後者の要素が前の要素をカバーするようにします。簡単な例を挙げましょう：デモアドレス
このように、z-index属性を子に追加しても、そのカスケードレベルは変更されません。唯一の方法は、アイテムのz-index値を変更することです。対象となる部分は特別なので、ポップアップ部分のみ、およびポップアップパーツはデフォルトでは表示されません。マウスが入り口の上にあるときにのみ表示されます。最も簡単な方法は、マウスをアイテムの上に置いたときにz-index値を増やして、それを破壊することです。後ろから来る機能：デモアドレス
最終的な簡略化された効果：
ベストプラクティス
これについて言えば、実際には終わってしまう可能性があります。学習の過程で、私は以前Zhang Xinxuが録画したビデオを見ていたのですが、彼はいくつかのベストプラクティスを提案しました。
- 2つのルールに違反しない：非フローティングレイヤー要素の場合、z-index値を設定しないでください。z-index値に2を超える理由はありません。
- フローティングレイヤーエレメントの場合、JSを介して本体の下の子エレメントの最大z-index値を取得し、フローティングレイヤーエレメントのz-index値として1を追加できます。
非フローティングレイヤー要素の場合、Zインデックスを使用して表示順序を調整しないでください。ただし、スタックレベルと次の基準を柔軟に使用して、要素が正しく表示されるようにします。Zインデックスを調整して調整するには、非フローティングレイヤー要素のz-index値が2を超えることはお勧めしません。DOM要素の場合、-1、0、1、2は、要素に正しい表示順序を持たせるのに十分です。
フローティングレイヤー要素の場合、サードパーティのコンポーネントによって開発されることがよくあります。フローティングレイヤーがDOMツリーで100％カバーされるかどうかを確認できない場合は、ページボディエレメントの下のすべてのサブエレメントの最大z-indexを動的に取得できます。値。フローティングレイヤーエレメントのz-index値としてこの基準に1を追加して、フローティングレイヤーエレメントが上部に表示されるようにします。
終わり
最後に、この記事でz-indexの詳細なプロパティについて説明します。CSSプロパティにはたくさんのイースターエッグがあると思います。次に、連絡して詳細をまとめる時間があるので、時間があるときに共有し続けます。