カスケードとカスケードレベル 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チェックボックス説明テキストをクリックして状態を選択/チェック解除します
設定する前に、次の操作を行う必要があります。 1. まずjdk bloggerをインストールします。...
重複キーの置換と挿入の違い置換の使用法競合がない場合、挿入と同等となり、他の列のデフォルト値が使用さ...
目次1. アプリケーションライフサイクル2. ページのライフサイクルコンポーネントライフサイクル要約...
XML は、データを記述、保存、送信、交換するために設計されています。 XML 1.0 は XML ...
プログラムサービスがgitlab ci/cdと統合されたk8sを使用してデプロイされている場合、gi...
この記事では、MySQL トリガーの定義と使用方法について説明します。ご参考までに、詳細は以下の通り...
Linux システムで iso ファイルをインストールするにはどうすればいいですか?インストール手順...
(1)各HTMLタグには属性スタイルがあり、CSSとHTMLを組み合わせている。 <div s...
2008年5月12日に四川省汶川市で発生した地震により、多くの命が失われ、遺憾なことと存じます。国務...
Linux で履歴レコードを表示し、タイムスタンプを追加するためのヒントbashに詳しい人なら、hi...
この記事では主に、オブジェクト内のフィールドを削除するための js の実装を紹介し、次のように共有し...
1. ホット デプロイメント: コンテナの実行中にプロジェクト全体を再デプロイすることを意味します。...
導入フロントエンドプロジェクトの開発プロセスでは、el-table によって表示される結果列がコンポ...
MySQLをインストールする6つの手順(インストールパッケージのみがインストール場所を選択できます)...
CSS3 の 3D 効果を使用して立方体を作成する方法を学ぶと、3D シーンの回転と変位のプロパティ...