CSSの階層関係を設定する方法

CSS では、z-index 属性を使用してレベルを設定できます。この属性は要素の重なり順を設定できます。重なり順が高い要素は常に、重なり順が低い要素の前に配置されます。 ; 構文 形式は「z-index:numeric;」、負の値も許可されます。

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

css では、z-index 属性を使用してレベルを設定できます。

z-index 属性は要素の重なり順を設定します。積み重ね順序が高い要素は常に、積み重ね順序が低い要素の前に表示されます。 (Z インデックスは、位置決めされた要素に対してのみ機能します)。

ページ レイアウトを行ったことがある学生は、z-index 属性についてよく知っているはずです。Z-index は、Web ページ表示のための特別な属性です。モニターに表示されるパターンは 2 次元平面であるため、位置属性を表す x 軸と y 軸があります。表示要素の上下の重ね順などの三次元概念を表現するために、z軸の違いを表現するz-index属性が導入されています。要素の重ね合わせ順序における上下の三次元関係を示します。

大きい z インデックス値を持つ要素は、小さい z インデックス値を持つ要素に重ねられます。このプロパティを指定しないで配置されたオブジェクトの場合、正の Z インデックス値を持つオブジェクトはその上にあり、負の Z インデックス値を持つオブジェクトはその下にあります。

簡単なデモ

<div style="width:200px;height:200px;"></div>
    <div style="position:relative; top:-50px; width:100px;height:100px;"><div>

2 つの DIV、2 つ目は 50 ピクセル上に移動します。通常の状況は次のようになります。

2 つ目div は最初の div をカバーし、z-index 属性を 2 番目の div に追加します

<div></div>
    <div><div>
<p>結果は次のようになります。z-index の最も単純なアプリケーションは次のようになります</p>
<p> <img title="CSSの階層関係を設定する方法" src="https://img.php.cn/upload/article/000/000/024/1d996561d6b4fe03194a5cc37c8b4c04-1.png" alt="CSSの階層関係を設定する方法"    style="max-width:90%"  style="max-width:90%" border="0"></p>#位置決めされた要素にのみ有効です<h3></h3>z-index 属性は、位置決めされた要素 (位置属性の値が相対、絶対、または固定であるオブジェクト) に適用され、位置決めされた要素が位置決めされた要素であるかどうかを決定するために使用されます。表示画面に垂直な方向 (Z 軸と呼ばれる) の積み重ね順序。つまり、要素が配置されていない場合、それに設定された Z インデックスは無効になります。 <p><pre class="brush:html;toolbar:false"><div style="width:200px;height:200px;z-index:30"></div>
<div style="position:relative; top:-50px; width:100px;height:100px;z-index:10;"><div>

最初の p の z-index は 2 番目の p の z-index よりも大きいですが、最初の p は位置決めされておらず、その z-index 属性が機能しないため、それでも 2 番目の p によってカバーされます。 p. .

#同じ z-index で誰が上がるか、誰が下がるか

同じ z-index に対して実際には 2 つの状況があります

1. どちらの要素も配置されておらず、位置が重なっている場合、または 2 つの要素が配置されており、z インデックスが同じで位置が重なっている場合、ドキュメント フローの順序に従って、後の要素が前の要素を上書きします。

<div style="position:relative;width:200px;height:200px;"></div>
<div style="position:relative; top:-50px; width:100px;height:100px;"><div>

#2. どちらの要素にも z-index が設定されていない場合は、デフォルト値が使用され、一方は位置決めされ、もう一方は位置決めされず、位置決めされた要素がカバーされます。 unpositioned element

<div style="position:relative;top:50px;width:200px;height:200px;"></div>
<div style=" width:100px;height:100px;"><div>

親子関係の処理

親要素の z-index が有効な場合、子要素はz-index が設定されているかどうかに関係なく、親要素は親要素の上に表示されます

<div style="position:relative;width:200px;height:200px;z-index:10;">
        <div style="position:relative;width:100px;height:100px;z-index:-5;"><div>
    </div>

子要素は z-index を親要素よりも小さく設定しますが、子要素は依然として親要素の上に表示されます。親要素

親要素の z-index が失敗した場合 (位置決めされていない、またはデフォルト値を使用している)、位置決めされた子要素の z-index 設定が有効になります

<div>
        <div>
<div>
</div>
<p>子要素 z-index=-5 が有効になり、親要素によってオーバーライドされます</p>
<p></p>
<p><img title="CSSの階層関係を設定する方法" src="https://img.php.cn/upload/article/000/000/024/eb75caa902e9aae6dbbb5eb9ed1d19eb-6.png" alt="CSSの階層関係を設定する方法"    style="max-width:90%"  style="max-width:90%" border="0">兄弟間の子要素</p>
<h3>If兄弟要素の z-index が有効になり、その子要素のカバレッジ関係は親要素によって決まります</h3><pre class="brush:html;toolbar:false;"><div style="position:relative;width:100px;height:100px;z-index:5;">
        <div style="position:relative;width:50px;height:250px;z-index:50;"></div>
    </div>

    <div style="position:relative;width:100px;height:100px;z-index:10;margin-top:4px;">
        <div style="position:relative;width:30px;height:150px;z-index:-10;"></div>
    </div>

最初の div の子要素ではありますが、z-index は比較的高いですが、親要素の z-index が 2 番目の div よりも低い場合、最初の div 子要素は 2 番目の div とその子要素でカバーされます

# (学習ビデオの共有: CSS ビデオ チュートリアル

)