カスケードとカスケードレベル HTML 要素は 3 次元の概念です。水平方向と垂直方向に加えて、「Z 軸」上にも積み重ねられます。 例: <スタイル> .f { 背景色: #ccffcc; 境界線: 1px 破線 #669966; パディング: 10px; } .f div:最初の型、 .f div:最後の型 { 背景色: rgba(255, 221, 221, .8); 境界線: 1px 破線 #990000; 幅: 200ピクセル; 高さ: 70px; 左マージン: 10px; } .f div:最後の型 { 背景色: rgba(221, 221, 255, .8); 境界線: 1px 破線 #000099; フロート: 左; 上マージン: -90px; 左マージン: 30px; } ラベル { 背景色: rgba(247, 236, 27, 0.8); 境界線: 1px 破線 #FFC107; パディング: 5px; } </スタイル> <div class="f"> <label>こんにちは</label> <div></div> <div></div> </div> 要素が重なる場合、スタッキング レベルが高い要素が小さい要素を覆います。2 つの要素のスタッキング レベルが同じ場合は、レンダリング順序に従って後者が前者を覆います。 例: <スタイル> .f { 背景色: #ccffcc; 境界線: 1px 破線 #669966; パディング: 10px; オーバーフロー: 非表示; } .f div:最初の型、 .f div:最後の型 { 背景色: rgba(255, 221, 221, .8); 境界線: 1px 破線 #990000; 幅: 200ピクセル; 高さ: 70px; フロート: 左; } .f div:最後の型 { 背景色: rgba(221, 221, 255, .8); 境界線: 1px 破線 #000099; 上マージン: -40px; 左マージン: 30px; } </スタイル> <div class="f"> <div></div> <div></div> </div> z-indexはスタックレベルに影響を与える可能性がある 要素のスタック レベルを変更する必要がある場合は、配置された要素 (1) で z-index を使用できます。 z-index は正の整数、0、または負の整数にすることができます。z-index がない場合 (デフォルトの z-index:auto)、または z-index が手動で auto に設定されている場合、0 として扱われます。 *(1) 位置値が相対的、絶対的、または固定である要素を指します。 例: <スタイル> .f { 背景色: #ccffcc; 境界線: 1px 破線 #669966; パディング: 10px; 位置: 相対的; zインデックス: 0; } .f div:最初の型、 .f div:最後の型 { 背景色: rgba(255, 221, 221, .8); 境界線: 1px 破線 #990000; 幅: 200ピクセル; 高さ: 70px; 左マージン: 10px; } .f div:最後の型 { 背景色: rgba(221, 221, 255, .8); 境界線: 1px 破線 #000099; 左マージン: 30px; 位置: 絶対; 上: 14px; /* zインデックス: -1; */ } ラベル { 背景色: rgba(247, 236, 27, 0.8); 境界線: 1px 破線 #FFC107; パディング: 5px; } </スタイル> <div class="f"> <label>こんにちは</label> <div></div> <div></div> </div> z-index が正の整数、0、または auto の場合: z-index が負の整数の場合: 注意深い人なら、この例では、装飾要素 (クラス名 f) の配置属性が設定され、z-index が 0 に設定されていることに気付くでしょう。これが設定されていない場合、要素 (青い背景のテスト要素) の z-index が負の整数になると、装飾要素の背後に実行されます。この点については、後ほど「z-index は負の整数値を取る」という話になります。 z-indexとスタッキングコンテキスト z-index はスタッキング レベルに影響を与える可能性がありますが、非常に重要な前提条件があります。つまり、比較に関係する要素は同じレベルにある必要があり、仕様ではこれを「スタッキング コンテキスト」と呼びます。 「コンテキスト」とは、これが閉じた領域であり、領域内の子要素が外部の要素に影響を与えないことを意味します。また、「スタック」とは、要素がこの領域を作成する限り、それが「Z 軸」上の現在のコンテキストよりも高くなることを意味します。
*(1) z-index:auto と z-index:0 は同じものとみなすことができますが、z-index:auto の要素は通常の位置指定要素であるのに対し、z-index:0 はスタックコンテキストを作成します。 2 つが同じレベルの場合、後者が前者を上書きします。 実際の作業では、新しい CSS3 プロパティがスタッキング コンテキストを積極的に作成するために使用されることはほとんどありません。したがって、スタッキング コンテキストを作成する最も一般的な方法は、配置された要素の z-index 整数値を設定することです。 例: <スタイル> .f { 背景色: #ccffcc; 境界線: 1px 破線 #669966; 高さ: 80px; 位置: 相対的; 下マージン: 10px; } .f_1>div { 背景色: rgba(255, 221, 221, .8); 境界線: 1px 破線 #990000; 幅: 150ピクセル; 高さ: 200px; 位置: 絶対; 上: 20px; 左: 170px; } .f_2>div { 背景色: rgba(221, 221, 255, .8); 境界線: 1px 破線 #000099; 幅: 200ピクセル; 高さ: 70px; 位置: 絶対; 上: 65px; 左: 50px; } </スタイル> <div class="f f_1">#1 <div>#3 </div> </div> <div class="f f_2">#2 <div>#4 </div> </div> この例では、z-index 値を設定する要素はありません。この場合、z-index はデフォルトの auto です。したがって、要素は後者が前者をカバーする順序でレンダリングされます。 .f_1>div { zインデックス: 1; } .f_2>div { zインデックス: 2; } この時点では、親要素 #1 と #2 には z-index 値が設定されていないため、新しいスタック コンテキストは作成されません。つまり、#3 と #4 は依然としてルート スタック コンテキストに属します。 .f_1>div { zインデックス: 2; } .f_2 { zインデックス: 1; } .f_2>div { zインデックス: 9; } #4 の z-index 値は #3 より大きいですが、#4 は #2 の子要素であるため、そのスタック レベルは完全に #2 のレベルに従います。 #2 と #3 は同じルート スタッキング コンテキストに属しており、#3 は #2 より大きいため、#3 は #2 (およびその子要素) の上にあります。 z-indexは負の整数値を取る 一般的に、z-index が負の値を取る場合は、背景色の背後に配置する必要があることが理解されています。 例: <スタイル> .f { 背景色: rgba(204, 255, 204, .8); 境界線: 1px 破線 #669966; パディング: 10px; } .f div { 背景色: rgba(255, 221, 221, .8); 境界線: 1px 破線 #990000; 幅: 200ピクセル; 高さ: 70px; 位置: 相対的; 上: 45px; Zインデックス: -1; } </スタイル> <div class="f"> <div></div> </div> 実際の作業では、負の z-index 値を使用すると、要素を非表示にする効果が得られます。ただし、親要素のスタッキング コンテキストを作成すると、子要素は非表示になりません。 例: <スタイル> .f { 背景色: rgba(204, 255, 204, .8); 境界線: 1px 破線 #669966; パディング: 10px; 位置: 相対的; zインデックス: 0; } .f div { 背景色: rgba(255, 221, 221, .8); 境界線: 1px 破線 #990000; 幅: 200ピクセル; 高さ: 70px; 位置: 相対的; 上: 45px; Zインデックス: -1; } </スタイル> <div class="f"> <div></div> </div> 前後の例を比較すると、z-index がどれだけ負の値であっても、現在のスタッキング コンテキストを突破できないことは明らかです。 CSS スタッキングと z-index サンプルコードに関するこの記事はこれで終わりです。CSS スタッキングと z-index に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: mysql を解決: エラー 1045 (28000): ユーザー 'root'@'localhost' のアクセスが拒否されました (パスワードの使用: NO/YES)
>>: HTMLチェックボックス説明テキストをクリックして状態を選択/チェック解除します
この記事では、年、月、日の3段階のリンクを実現するためのJavaScriptの具体的なコードを参考ま...
目次なぜパーティションが必要なのでしょうか?パーティショニング戦略パーティションの危険性なぜパーティ...
脆弱性の説明Apache Flink は、分散ストリームおよびバッチ データ処理用のオープン ソース...
この記事の例では、衝突検出を実装するためのjsの具体的なコードを参考までに共有しています。具体的な内...
目次Vue でのモデルバインド表示の if の v-text の説明v-html: v-オンv-if...
この記事では、チャット機能を実現するためのVue+express+Socketの具体的なコードを参考...
WeChatアプレットプロジェクトでは、開発モジュールに手書き署名機能が含まれ、WeChatアプレッ...
1: openssl とは何ですか? その機能は何ですか?適用シナリオは何ですか? Baidu 百科...
疫病のせいで家にこもりきりで、頭がおかしくなりそうなので、パソコンを起動して頭を働かせてみました。今...
JavaScriptゲームSnakeの実装アイデア(完全なコード実装)を参考までに説明します。具体...
フロントエンド開発でよく使われるCSSの配置方法は、位置決めには、通常位置決め、相対位置決め、絶対位...
rm コマンドrm コマンドは、ファイルを削除するときによく使用されるコマンドです。ファイルまたはデ...
WeChatミニプログラムはますます人気が高まっています。多くの大学生が独学で学んでいるのも見てきま...
<br />条件付きコメントはIEシリーズ製品上でXHTMLコード処理を分離して行うこと...
写真をアップロードするので、まずはダウンロード可能な画像リソースかどうかを判断する必要があります。正...