CSS スタッキングと Z インデックスのサンプルコード

CSS スタッキングと Z インデックスのサンプルコード

カスケードとカスケードレベル

HTML 要素は 3 次元の概念です。水平方向と垂直方向に加えて、「Z 軸」上にも積み重ねられます。
これは重ね合わせであるため、順序の問題が伴い、仕様では「カスケード レベル」と呼ばれます。
デフォルトでは、画像とテキストが Web ページの中核となるため、インライン要素のレベルが最も高くなります。次にレイアウトが続きます。レイアウトでは、フローティング要素 (ドキュメント フロー外) のレベルがブロック レベル要素よりも高くなります。最も低いレベルは、背景や境界線などの装飾属性を設定する要素です。

例:

<スタイル>
    .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 軸」上の現在のコンテキストよりも高くなることを意味します。
スタッキング コンテキストは、いくつかの CSS プロパティを使用して作成できます。一般的なプロパティは次のとおりです。

  • html 要素は、ルート スタッキング コンテキストと呼ばれるデフォルトのスタッキング コンテキストを作成し、すべての要素はこのレイヤーに配置されます。
  • 位置値は相対または絶対であり、z-index値はauto(1)ではありません。
  • 位置値は固定です。
  • 不透明度値が 1 以外、変換値が none 以外、z-index 値が auto 以外の flex レイアウト要素や grid レイアウト要素などの新しい CSS3 プロパティ。

*(1) z-index:auto と z-index:0 は同じものとみなすことができますが、z-index:auto の要素は通常の位置指定要素であるのに対し、z-index:0 はスタックコンテキストを作成します。 2 つが同じレベルの場合、後者が前者を上書きします。

実際の作業では、新しい CSS3 プロパティがスタッキング コンテキストを積極的に作成するために使用されることはほとんどありません。したがって、スタッキング コンテキストを作成する最も一般的な方法は、配置された要素の z-index 整数値を設定することです。
前述のように、z-index は現在のスタック コンテキスト内の要素のスタック レベルを変更できます。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 です。したがって、要素は後者が前者をカバーする順序でレンダリングされます。
次のように、#3 と #4 に正の z-index 値を設定すると、

.f_1>div {
    zインデックス: 1;
}

.f_2>div {
    zインデックス: 2;
}

この時点では、親要素 #1 と #2 には z-index 値が設定されていないため、新しいスタック コンテキストは作成されません。つまり、#3 と #4 は依然としてルート スタック コンテキストに属します。
同じスタッキング コンテキストでは、スタッキング レベルが大きい要素が小さい要素をカバーするため、#4 はすべての要素の上にあります。
ここで、#2、#3、#4 の z-index 値を次のように設定します。

.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チェックボックス説明テキストをクリックして状態を選択/チェック解除します

推薦する

Win10 構成 Tomcat 環境変数チュートリアル図

設定する前に、次の操作を行う必要があります。 1. まずjdk bloggerをインストールします。...

MySQLで論理SQLを置き換える際の落とし穴を回避する方法の詳細な説明

重複キーの置換と挿入の違い置換の使用法競合がない場合、挿入と同等となり、他の列のデフォルト値が使用さ...

VUE ユニアプリライフサイクルに関する簡単な説明

目次1. アプリケーションライフサイクル2. ページのライフサイクルコンポーネントライフサイクル要約...

W3C チュートリアル (5): W3C XML アクティビティ

XML は、データを記述、保存、送信、交換するために設計されています。 XML 1.0 は XML ...

Docker ビルド kubectl イメージ実装手順

プログラムサービスがgitlab ci/cdと統合されたk8sを使用してデプロイされている場合、gi...

MySQL トリガーの定義と使用方法の簡単な例

この記事では、MySQL トリガーの定義と使用方法について説明します。ご参考までに、詳細は以下の通り...

LinuxシステムにISOファイルをインストールする方法

Linux システムで iso ファイルをインストールするにはどうすればいいですか?インストール手順...

CSSとHTMLを組み合わせる4つの方法

(1)各HTMLタグには属性スタイルがあり、CSSとHTMLを組み合わせている。 <div s...

ウェブサイトを黒、白、グレーにする4つのコードの詳細な説明

2008年5月12日に四川省汶川市で発生した地震により、多くの命が失われ、遺憾なことと存じます。国務...

Linux で履歴レコードを表示し、タイムスタンプを追加するためのヒント

Linux で履歴レコードを表示し、タイムスタンプを追加するためのヒントbashに詳しい人なら、hi...

オブジェクト内のフィールドを削除する js メソッド

この記事では主に、オブジェクト内のフィールドを削除するための js の実装を紹介し、次のように共有し...

Eclipse/Tomcat でホットデプロイメントとホットスタートを実装する方法

1. ホット デプロイメント: コンテナの実行中にプロジェクト全体を再デプロイすることを意味します。...

Vue ページレンダリングにおけるキーの適用例チュートリアル

導入フロントエンドプロジェクトの開発プロセスでは、el-table によって表示される結果列がコンポ...

MySQL 8.0.21 無料インストール版 設定方法 グラフィックチュートリアル

MySQLをインストールする6つの手順(インストールパッケージのみがインストール場所を選択できます)...

CSS3の3D効果を使って立方体を作成する

CSS3 の 3D 効果を使用して立方体を作成する方法を学ぶと、3D シーンの回転と変位のプロパティ...