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

推薦する

JavaScript ベースで年・月・日の 3 階層連携を実現

この記事では、年、月、日の3段階のリンクを実現するためのJavaScriptの具体的なコードを参考ま...

MySQL データテーブルのパーティション戦略と利点と欠点の分析

目次なぜパーティションが必要なのでしょうか?パーティショニング戦略パーティションの危険性なぜパーティ...

Apache Flink の任意の Jar パッケージのアップロードにより、リモート コード実行の脆弱性が再発する問題が発生する (脆弱性警告)

脆弱性の説明Apache Flink は、分散ストリームおよびバッチ データ処理用のオープン ソース...

衝突検出を実装するためのjs

この記事の例では、衝突検出を実装するためのjsの具体的なコードを参考までに共有しています。具体的な内...

vue.js でよく使われる v 命令の解析

目次Vue でのモデルバインド表示の if の v-text の説明v-html: v-オンv-if...

Vue+express+Socketでチャット機能を実現

この記事では、チャット機能を実現するためのVue+express+Socketの具体的なコードを参考...

WeChatアプレットキャンバスが署名機能を実装

WeChatアプレットプロジェクトでは、開発モジュールに手書き署名機能が含まれ、WeChatアプレッ...

opensslを使用して無料の証明書を生成する方法

1: openssl とは何ですか? その機能は何ですか?適用シナリオは何ですか? Baidu 百科...

CSS3 引用のソースと出典をマークする方法

疫病のせいで家にこもりきりで、頭がおかしくなりそうなので、パソコンを起動して頭を働かせてみました。今...

スネークゲームのアイデアを実現するためのJavaScript

JavaScriptゲームSnakeの実装アイデア(完全なコード実装)を参考までに説明します。具体...

CSSの4種類の配置の違いの詳細な説明

フロントエンド開発でよく使われるCSSの配置方法は、位置決めには、通常位置決め、相対位置決め、絶対位...

Linux コマンドラインからファイルを削除する実用的な方法

rm コマンドrm コマンドは、ファイルを削除するときによく使用されるコマンドです。ファイルまたはデ...

WeChatアプレットが計算機機能を実装

WeChatミニプログラムはますます人気が高まっています。多くの大学生が独学で学んでいるのも見てきま...

XHTML の IE 条件付きコメント

<br />条件付きコメントはIEシリーズ製品上でXHTMLコード処理を分離して行うこと...

リンクされた画像をダウンロードしてアップロードするJavaScriptの実装

写真をアップロードするので、まずはダウンロード可能な画像リソースかどうかを判断する必要があります。正...