CSS_html/css_WEB-ITnose のカスケード コンテキストとカスケード順序についての深い理解

ゼロ、世界の真実はすべて判明します

この世界では、すべてに順序があり、すべてに年功序列があります。たとえば、食堂で食べ物を買うために列に並ばなければならないとします。それは先着順なので、一度に殺到することはできません。もう一つの例は、妻の言葉は常に正しく、上司の言葉は常に正しいです。

CSS の世界でも同じことが当てはまります。しかし、通常の状態では、誰もが平和に歌い踊り、差は見られず、いわゆるすべての生き物の平等です。しかし、衝突やもつれが生じた場合、完全な同等性を達成することが不可能であることは明らかであり、アイデンティティの差異が順番に現れます。たとえば、ジャックとローズは単独でボード上に浮かぶことしかできません。このとき、衝突が発生し、その結果は誰もが知っています。では、CSSの世界における要素にとって、いわゆる「競合」とは何を意味するのでしょうか?その中でも非常に重要な要素が「カスケード表示の競合」です。

デフォルトでは、Web コンテンツはオフセット角度なしで垂直に表示されます。コンテンツを積み重ねる場合、前から後ろへの積み重ね順序が必要になります。これは、現実世界の年功序列の感覚に似ています。

Web ページ内の要素がどのように「年功序列」でランク付けされるかを理解するには、CSS のカスケード コンテキストとカスケード順序を深く理解する必要があります。

CSS の z-index プロパティについては皆さんよくご存じかと思いますが、ここでお伝えしなければならないのは、z-index は実際には CSS のスタック コンテキストおよびスタック順序における小さなボートにすぎないということです。

1. スタッキングコンテキストとは

スタッキングコンテキストは英語で「スタッキングコンテキスト」と呼ばれ、HTMLにおける三次元の概念です。要素にカスケード コンテキストが含まれている場合、この要素が Z 軸上で「優れている」ことがわかります。

ここに z 軸 という名詞があります。これは何を指しますか?

は、ユーザーと画面の間の目に見えない垂直線を表します (下の図を参照 - 赤い線):

カスケード コンテキストは、「ブロック」に似た概念です。 BFC フォーマット コンテキスト (BFC) に似ています。ただし、概念は比較的架空で抽象的なので、それを簡単に理解するには、視覚化する必要があります。

具体的にはどのような方法でしょうか？

「カスケード コンテキスト」を公式として 理解できます : Web ページには、現実世界のすべての生き物と考えることができる要素が多数あります。現実の世界では、私たちのほとんどは一般人であり、役人もいます。ここでの「公式」は、Web ページ内のカスケード状のコンテキスト要素として理解できます。

つまり、私たち一般人が役人になるのと同じように、ページ上の要素は役人になると一般人よりも天皇に近づくのと同じですよね。 Web ページ内の要素のレベルをユーザーに近づけます。

2. スタッキング レベルとは何ですか?

スタッキング レベルについて話しましょう。 「積み重ねレベル」は英語では「stacking level」といい、同じ積み重ねコンテキスト内の要素のz軸上の表示順序を決定します。レベルという言葉は、現実世界における 3 つ、6 つ、または 9 つのレベルと年功序列を簡単に思い出させます。現実の世界では、一卵性双生児も含めて、誰もが独立した個人です。違いがあるところには違いがあります。たとえば、双子は Ctrl+C/Ctrl+V で得られるもののように見えますが、実際には、生まれた時間の順序があり、先に生まれた方が年上の、長兄または長姉になります。 Web ページ内の要素にも同様のことが当てはまり、ページ内の各要素は独立したものであり、同様のランキングを持つ必要があります。そして、このランキングと年功序列は、ここでは「カスケード レベル」と呼ばれるものです。カスケード コンテキスト要素のカスケード レベルは、通常の要素の場合は役人の階級、1 級と 2 級、郡判事、知事などとして理解できます。これは自分で理解できます。

したがって、カスケード コンテキスト要素を含むすべての要素にカスケード レベルがあることは明らかです。カスケード コンテキスト要素のカスケード レベルは、役人の階級、1 級、2 級、郡判事、知事などとして理解できます。 。次に、通常の要素のスタッキング レベルについては、現在のスタッキング コンテキスト要素に限定して説明します。なぜ？そうしないと意味がないからです。

このように理解しましょう~ 上で述べたように、重複する文脈を持つ要素は役人であることに似ています。誰もが知っているように、役人の家族にはメイド、ボディガード、家政婦などがいます。主人次第とはよく言ったもので、役人Aの家の家政婦と役人Bの家の家政婦を競うことは実は無意味で、スゴイかどうかは完全に主人が決めるのです。一人の人でも悟りを開くことができ、鶏や犬は天国に昇ることができます。ヘシェンの家の家政婦は、鹿下町のロウジ県の判事の家の家政婦に匹敵すると思いますか。リー首相の秘書は、あなたの村の支部の秘書（もしいたとしたら）の秘書を数分で殺害しましたか？

言い換えると、通常の要素のスタッキング レベルは最初にスタッキング コンテキストによって決定されます。したがって、スタッキング レベルの比較は現在のスタッキング コンテキスト要素内でのみ意味を持ちます。

スタッキング レベルと CSS の z-index プロパティを混同しないように注意してください。確かに、z-index は場合によってはスタッキング レベルに影響を与える可能性がありますが、スタッキング レベルのすべての要素が存在する場合、それは位置決めされた要素とフレックス ボックスの子要素にのみ限定されます。

3. スタッキングシーケンスとは

スタッキングシーケンスについて説明します。 「重なり順」は英語で「stacking order」といい、要素を積み重ねる際に特定の垂直方向の表示順序を持つことを意味します。上記の 重なりコンテキストと重なりレベルは概念です。 。ここでの の重ね順は です。

CSS3 が登場する前の CSS2.1 の時代には (ここでの前提に注意してください)、カスケード順序ルールは以下の図に従っていました:

誰か見たことがあるかもしれません似たような絵は何年も前に外国人によって描かれました。内容は英語です。しかし、もっと重要なことは、国内の同業他社がそれを検証し実践していないことが推定されていることです。実際、多くの重要な情報が欠落しています。上記は中国語版であり、私が手動で再描画し、他では絶対に入手できない多くの重要な知識と情報を追加しました。透かしのない大きな高解像度の写真が必要な場合は、ここをクリックして購入してください (0.5 元)。

重要な欠落情報は次のとおりです。

1. 最下位レベルの境界線/背景は、カスケード コンテキスト要素の境界線と背景色を指します。各スタック順序ルールは、完全なスタック コンテキスト要素に適用されます。
2. 元の画像では inline-block の重なり順が示されていません。実際には、inline-block と inline の水平要素は同じレベルにあります。
3. z-index:0 は、実際には単純にスタッキング レベルから見ると z-index:auto と同じと見なすことができます。ここでの「純粋にスタッキング レベルから」という表現に注意してください。実際、スタッキング コンテキストの分野では、両者の間には根本的な違いがあります。

ここで質問したいのですが、なぜインライン要素の重なり順がフローティング要素やブロック要素よりも高いのか考えたことはありますか?

なぜですか?フローティング要素とブロック要素の方が明らかに扱いにくいと感じます。

あまりうるさく言うつもりはありませんが、下の図の注釈を見てください:

境界線や背景などは通常、装飾的な属性です。 while フローティング要素とブロック要素 通常、レイアウトに使用されますが、インライン要素はコンテンツです。 Web ページで最も重要なことは何ですか?もちろん内容ですよね？

したがって、コンテンツのスタック順序をかなり高く保つようにして、スタックが発生する場合は、重要なテキストと画像コンテンツが最初に画面に表示されるようにするのが良いでしょう。たとえば、テキストとフローティング画像が重なっている場合:

上記の重なり順ルールはまだ古いものですが、CSS3 も関与すると、状況は異なります。

4. 覚えておくべきレイヤリングの原則

ラミネートの分野における黄金律は次の 2 つです。要素がカスケードされる場合、そのカバレッジ関係は次の 2 つの基準に従います:

1. 大きい方が上位になります: 識別された z などの明らかなスタッキング レベル マークがある場合-indx 値では、同じスタッキング コンテキスト フィールド内で、スタッキング レベル値が大きい方が小さいものをカバーします。平たく言えば、上級官僚が下級官僚を抑圧するということだ。
2. 後ろから追いつく: 要素の積み重ねレベルが一貫していて、積み重ね順序が同じ場合、DOM フローの後ろの要素は前の要素を上書きします。

CSS と HTML の分野では、要素が重なる限り、上記 2 つの黄金律は切り離すことができません。後で複数の例が出てくるので、ここでやめておきます。

5. カスケードコンテキストの特徴

カスケードコンテキスト要素には次のような特徴があります。

• カスケードコンテキストのカスケードレベルは通常の要素よりも高くなります。 (理由は後で説明します) ;
• カスケード コンテキストは要素のブレンディング モードをブロックできます (この記事の後半を参照)。
• カスケード コンテキストはネストできます。内部カスケード コンテキストとそのすべての子要素は、外部カスケード コンテキストの影響を受けます。
• 各スタッキング コンテキストはその兄弟要素から独立しています。つまり、スタックの変更またはレンダリングを行うときは、子孫要素のみを考慮する必要があります。
• 各スタッキング コンテキストは自己完結型です。要素がスタックされると、要素全体が親のスタッキング コンテキストのスタック順序にある​​と見なされます。

を現実世界の言語に翻訳すると、次のようになります:

• 当局者は一般の人々よりも聖霊に会う機会が多いです。
• 指導者が視察に行くと、繁栄だけを見て、本当の人々の感情は見えません。
A 家庭では、父親が役人になることができ、子供も同時に役人になることができます。ただし、子供の役割は父親によって制御されなければなりません。
あなた自身が役人になれば、兄弟たちはあなたを利用することはありません。いかなる利益や変更も、あなた自身の子供にのみ影響します。
すべての役人は、自分自身の小グループを持っています。家族と家政婦（他の役人の家族と家政婦を含む）の間に摩擦や対立がある場合、役人、つまり役人が優先されなければなりません。マスターの顔。

1. 天皇親族 流派: ページのルート要素はカスケードコンテキストで生まれます。これは「ルート カスケード コンテキスト」と呼ばれます。
2. 科学的検査が選択されました 円: z-index 値が数値である位置決めされた要素の従来のカスケード コンテキスト。
3. 公式になるためのその他の方法: 他の CSS3 属性。

①. ルート カスケード コンテキスト

②. 位置決め要素と従来のカスケードコンテキスト

<div style="position:relative; z-index:auto;">    <img src="mm1.jpg" style="position:absolute; z-index:2;">    <-- 横妹子 --></div><div style="position:relative; z-index:auto;">    <img src="mm2.jpg" style="position:relative; z-index:1;">    <-- 竖妹子 --></div>

<div style="position:relative; z-index:0;">    <img src="mm1.jpg" style="position:absolute; z-index:2;">    <-- 横妹子 --></div><div style="position:relative; z-index:0;">    <img src="mm2.jpg" style="position:relative; z-index:1;">    <-- 竖妹子 --></div>

なぜ小さな変化がアイデアに影響を与えるのでしょうか?

<div class="box">    <div>    	<img src="mm1.jpg">    </div></div>

.box {  }.box > div { background-color: blue; z-index: 1; }    /* 此时该div是普通元素，z-index无效 */.box > div > img {   position: relative; z-index: -1; right: -150px;     /* 注意这里是负值z-index */}

.box { display: flex; }.box > div { background-color: blue; z-index: 1; }    /* 此时该div是层叠上下文元素，同时z-index生效 */.box > div > img {   position: relative; z-index: -1; right: -150px;     /* 注意这里是负值z-index */}

<div class="box">    <img src="mm1.jpg"></div>

.box { background-color: blue;  }.box > img {   position: relative; z-index: -1; right: -150px;}

.box { background-color: blue; opacity: 0.5;  }.box > img {   position: relative; z-index: -1; right: -150px;}

.box { background-color: blue; transform: rotate(15deg);  }.box > img {   position: relative; z-index: -1; right: -150px;}

.box { background-color: blue; mix-blend-mode: darken;  }.box > img {   position: relative; z-index: -1; right: -150px;}

.box { background-color: blue; filter: blur(5px);  }.box > img {   position: relative; z-index: -1; right: -150px;}

<div class="box">    <img src="mm1.jpg"></div>

.mode {  /* 竖妹子绝对定位，同时混合模式 */  position: absolute; mix-blend-mode: darken;}    .box {  background: blue;         }.box > img {   position: relative; z-index: -1;}

.mode {  /* 竖妹子绝对定位，同时混合模式 */  position: absolute; mix-blend-mode: darken;}    .box {  background: blue; isolation:isolate;         }.box > img {   position: relative; z-index: -1;}

.box { background-color: blue; will-change: transform;  }.box > img {   position: relative; z-index: -1; right: -150px;}

<img src="mm1" style="position:relative"><img src="mm2" style="transform:scale(1);">

<img src="mm2" style="transform:scale(1);"><img src="mm1" style="position:relative">

<div style="display:flex; background:blue;">   <img src="mm1.jpg" style="z-index:-1;"></div>

<div style="display:flex; background:blue;">   <img src="mm1.jpg" style="z-index:1;"></div>

@keyframes fadeIn {  0% {     opacity: 0;  }  100% {    opacity: 1;  }}