cssカスケードルール
カスケーディング・ルール」とは、ウェブ・ページ内の要素が重なったときの振る舞いを規定するルールのことです。
まず、「カスケード」の基本的な概念について説明します。
1、カスケード・コンテキスト：要素にカスケード・コンテキストが含まれる場合、z軸方向に優位であると解釈することができ、カスケード・コンテキストは境界を意味します。
2、カスケード・レベル：z軸上で同じカスケード・コンテキストの要素の順序を決定します。
すべての要素は、カスケーディング・コンテキスト要素や通常の要素などを含む、カスケーディング・レベルを持っています。
要素のカスケード順序
要素がカスケードされるとき、特定の垂直順序を持つことを示します。
カスケード・コンテキストとカスケード・レベルは概念で、カスケード順序は規則です。
css 2.1のカスケード規則を以下に示します：
カスケードガイドライン
要素がカスケードされる場合、オーバーレイの関係は以下の2つのガイドラインに従います：
- どちらが大きく、どちらが上か: z-index属性の値のように、カスケード・レベルの明確な指示がある場合、同じカスケード・コンテキスト・フィールドでは、カスケード・レベルの値が大きい方が小さい方に優先します。
- 後から来たもの：要素が同じカスケード・レベルと同じカスケード順序を持つ場合、DOM フローで後から来た要素は、先に来た要素を上書きします；
カスケード・コンテキスト
カスケードコンテキストの特徴
1, カスケード・コンテキストは、通常の要素よりも高いカスケード・レベルを持ちます；
2、カスケーディング・コンテキストは入れ子にすることができ、内部のカスケーディング・コンテキストとその子はすべて外部の「カスケーディング・コンテキスト」に従います；
3、各カスケーディング・コンテキストはその兄弟要素から独立しています、すなわち、カスケーディング順序に変更を加えるとき、子孫要素だけを考慮する必要があります；
4、各カスケード・コンテキストは自己完結しており、要素がカスケードされると、要素全体が親のカスケード・コンテキストのカスケード順序にあるとみなされます；
カスケードコンテキストの作成
ブロック・フォーマット・コンテキストと同様に、カスケード・コンテキストは基本的にいくつかの特定のcssプロパティによって作成されます；
1, ナチュラリスト：ページのルート要素`<html>`ルート要素のコンテキストと呼ばれるカスケード・コンテキストで生まれる
2，正統派：z-index値が数値の位置決めされた要素に対する伝統的な「カスケード・コンテキスト」。”；
相対/絶対、Firefox/IEブラウザ（Chromeを除く）の位置値について
(鶺鴒はポジションを含む:fixed 宣言された位置指定要素は、z-indexの値がautoでないとき
カスケード・コンテキスト<br />
3，拡張パイ：その他のcssプロパティ
（1）要素はフレックスレイアウト要素である（親要素の表示）:flex|inline-flex），また、z-indexの値はautoではない。
（2）要素の不透明度が1でない。
（3）要素のtransformの値がnoneではない。
（4）エレメントミックスブレンドモードの値が正常でない。
カスケード・コンテキストとカスケード順序の関係
通常の要素はカスケーディング・コンテキストを持ち、その要素のカスケーディング順序は一般的に2つのうちの1つになります：
1、カスケード・コンテキスト要素がz-indexの値に依存しない場合、カスケード順序はz-index: autoと**z-inde: 0;**が同じレベルです；
2, z-indexに依存する場合、カスケード順序を決定するz-indexの値があります；
従って、一旦要素がpositioned要素になると、そのカスケード順序は通常の要素IQになります;一旦要素がpositioned要素になると、そのz-indexが自動的に有効になるので、この時z-indexの値はauto、つまりz-index:0レベルです。
z-indexをサポートしていないカスケーディング・コンテキスト要素は、当然z-index:autoになり、これはカスケーディング・コンテキスト要素が位置指定された要素と同じカスケーディング順序にあることを意味します。
これがその仕組みです。
z-indexネガティブの原則
z-indexネガティブな仕事：
1，要素を隠すには、カスケード・コンテキスト内の親要素に背景色を追加するだけで、その要素を隠すことができる；
2，エレメントの後ろにポジショニングする
z-index使用ガイドライン
非フローティング要素では、 z-index値を設定する必要はなく、 z-indexを設定する場合、最大値は2を超えてはなりません。
理由
1、位置指定された要素にz-indexを設定すると、その要素はカスケードコンテキストの要素となり、カスケード順序が変更され、親要素のカスケード順序によって子要素が他の要素の問題をカバーするために巨大なz-indexを設定することができない可能性があります。
2, z-indexの値を任意に設定することは避けてください。
上記のガイドラインは、ポップアップなどを除いた通常の DOM 要素についてのみです。
