简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

HTML レイアウトのヒント: カスケード順序制御に z-index 属性を使用する方法

王林
リリース： 2023-10-20 11:18:11
オリジナル
937 人が閲覧しました

HTML レイアウトのヒント: カスケード順序制御に z-index 属性を使用する方法

HTML レイアウト スキル: z-index 属性を使用して重なり順を制御する方法

HTML ページでは、CSS を使用してレイアウトを制御する必要があることがよくあります。要素の表示順序。複数の要素が重なっている場合、重なり順を調整することで表示効果を制御できるようにしたいと考えています。これには、CSS の z-index プロパティを使用する必要があります。

z-index は CSS のプロパティであり、要素の重なり順を制御するために使用されます。具体的には、z-index 属性の値が大きいほど、要素のランクが高くなります。つまり、他の要素よりも上に表示されます。デフォルトでは、すべての要素の z-index 値は auto です。これは、要素が HTML ドキュメントに出現する順序でスタックされることを意味します。つまり、後の要素が前の要素を上書きします。

次に、z-index 属性を使用して重なり順を制御する方法を、いくつかの具体的なコード例を通じて紹介します。 

<!DOCTYPE html>
<html>
<head>
<style>
  .box {
    width: 100px;
    height: 100px;
    position: absolute;
  }

  #box1 {
    background-color: red;
    z-index: 2;
  }

  #box2 {
    background-color: blue;
    z-index: 1;
  }

  #box3 {
    background-color: green;
    z-index: 3;
  }
</style>
</head>
<body>
  <div id="box1" class="box"></div>
  <div id="box2" class="box"></div>
  <div id="box3" class="box"></div>
</body>
</html>
ログイン後にコピー

上記のサンプルコードでは、クラスがbox、IDがそれぞれbox1、box2、box3となる3つのdiv要素を作成しました。これら 3 つの div 要素は、position 属性を ABS に設定することで互いに重なり合います。

box1 の z インデックス値は 2、box2 の z インデックス値は 1、box3 の z インデックス値は 3 です。 box3 の z-index 値が最も大きいため、box3 が一番上に表示され、次に box1 と box2 が一番下に表示されます。

サンプル コードで z-index 値を変更して、要素の重なり順の変化を観察してみることができます。 box1、box2、box3 の z-index 値を調整して、ページを更新するだけです。

もちろん、z-index は 3 つの要素のカスケード制御に限定されません。HTML レイアウトでさらに多くの要素を使用し、さまざまな z-index 値を設定することでその表示を制御できます。

要素のposition属性がstatic(デフォルト値)に設定されている場合、z-index属性は効果がないことに注意してください。したがって、z-index 属性を使用して重なり順を制御する場合は、要素の位置属性を相対、絶対、または固定に設定してください。

要約すると、z-index 属性を使用すると、HTML レイアウト内の要素の積み重ね順序を簡単に制御できます。要素の Z インデックス値を調整することで、さまざまな複雑なレイアウト効果を簡単に実現できます。この記事が z-index 属性の理解と適用に役立つことを願っています。

以上がHTML レイアウトのヒント: カスケード順序制御に z-index 属性を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
HTMLレイアウトのスキル z インデックス属性 スタッキングシーケンス制御
ソース：php.cn
前の記事：HTML と CSS を使用してレスポンシブなストア掲載情報のレイアウトを作成する方法 次の記事：HTML と CSS を使用してウォーターフォール フロー カード レイアウトを実装する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
PHP で VueJS コンポーネントを活用する 最下位の dom リーフまで VueJS を使用せずに、Php によって生成された基本的な HTML と VueJS コンポーネントを混合したいと考えています。親レイアウトには V...
から 2023-11-11 00:01:44
0
2
288
新しいタイトル: Pure CSS と HTML を使用した圧縮 HTML マトリックス レイアウト デザイン 純粋なHTMLとCSSを使用してロゴを作成しようとしています。デザインは非常に直感的で、いくつかの色付きアイテムを含む [13x13] マトリックスです。 CSSは非常にシンプルで...
から 2023-09-07 21:27:33
0
1
241
モバイル上のカスタム Bootstrap 5 カルーセル (複数の項目、ただし 1 行ではない) モバイル デバイスでカルーセル レイアウトをカスタマイズしようとすると問題が発生します。モバイル上でカルーセルの項目を 1 つだけではなくすべて表示したいのですが、いくつかの CS...
から 2023-09-05 11:53:56
0
1
296
グリッド レイアウトの展開をアニメーション化するにはどうすればよいですか? グリッド レイアウトの展開をアニメーション化する方法を知りたいです。コードからわかるように、4 つの div があります。そのうちの 2 つは表示され、残りの 2 つはチェックボッ...
から 2023-08-31 21:09:37
0
1
222
レイアウトの変更を防ぐために、可変サイズの画像をロードする前にそのスペースを予約するにはどうすればよいですか? テキスト、画像タグ、および次のようなテキストを含む HTML ページがあります。これは画像の前のテキストです。 <imgsrc="image.jpeg"/...
から 2023-08-28 00:04:44
0
1
268
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！