CSSで要素の階層を設定する方法

CSS では、z-index 属性を使用して要素の階層を設定できます。必要なのは、指定した要素の "z-index:auto|value;" スタイル、つまり z-index 属性を設定することだけです。要素のスタックを指定できます。順序、より高いスタック順序を持つ要素は常に、より低いスタック順序を持つ要素の前に配置されます。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css では、z-index 属性を使用して要素の階層を設定できます。

z-index 属性は、要素の積み重ね順序を指定します。積み重ね順序が高い要素は常に、積み重ね順序が低い要素の前に表示されます。

要素のスタック レベルは、Z 軸上の要素の位置 (X 軸および Y 軸を基準) に相対的です。 Z インデックスの値が大きいほど、要素が積み重ね順序の一番上に近くなります。この階層化シーケンスは、垂直の糸軸に沿って表示されます。 Z インデックスがどのように機能するかをより明確に示すために、この画像では積み重ねられた要素の視覚的な位置を誇張しています。

自然な積み重ね順序のデモ

最も基本的な積み重ねをわかりやすく示すために、次のデモを参照してください。アドレス http://jsbin.com/yezisino/1 / edit

html コード:

<div class="blue"></div>
<div class="green"></div>
<div class="red"></div>

css:

.blue,.green,.red{
      width:200px;
      height:200px;
    }
    .blue{
      background:blue;
    }
    .green{
      background:green;
      margin-top:-100px;
      margin-left:50px;
    }
    .red{
      background:red;
      margin-top:-100px;
      margin-left:100px;
    }

レンダリング:

Verify z-index

z-index の機能を確認するには、上記のコードを変更します。例は次のとおりです。

青色に変更します。緑 赤 それぞれ z-index は 999 99 9 に設定されていますが、以前と何も変わっていないように見えます 理由は、Z-index が絶対、固定、相対の 3 つの位置属性を明確に持つ要素でのみ機能するためです定義されています。

図に示すように、表示順序は設定した z-index サイズに従って表示されています

複数の親要素内の子要素の Z-index 設定

元のベースに基づいて、html と css にいくつかの変更を加え、子要素の設定が異なることを確認しました親要素が異なる場合のz-index表示効果

異なる親要素の子要素が表示されると、次のように表示されることが明確にわかります。 Rendering.

(学習ビデオ共有: css ビデオ チュートリアル)

以上がCSSで要素の階層を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。