css z-indexレイヤーの重なり順例を詳しく解説

DIV レイヤー、Span レイヤーなど html タグ レイヤーオーバーラップシーケンススタイル z-index 通常はあまり使用しませんが、CSS z-index の使用に遭遇することは避けられません。次に divcss5 では、基本的な属性からオブジェクトの重なり順や重なり順の設定まで z-index を紹介し、基本的な構文から応用事例のチュートリアルまで z-index を説明して学習します。

1. Z-index の構文と構造

z-index は、次のような特定の数値

に従います。

div{z-index:100}

注: z-index の値は単位に従いません。

z-indexの数値が大きいほど大きくなり、その値は整数および正の数(正の整数)である必要があります。

2. Z-indexの使用条件

Z-indexは、absolutepositioning position:absolute属性を使用する場合にのみ使用できます。通常、異なるオブジェクト ボックスを重ねて異なる順序で配置するため、z-index スタイル属性が必要です。

3. Z-index の適用例

Z-index スタイル属性を観察しやすくするために、3 つの DIV ボックスを設定し、異なる CSS 背景 カラーを設定し、同じ CSS 高さと CSS 幅を設定しました。背景色をそれぞれ黒、赤、青に設定します。 CSS幅は100px、CSS高さは50px

1、ケースCSSコード

/* www.divcs5.com z-index实例 */ 
.divcss5{position:relative;} 
.divcss5-1,.divcss5-2,.divcss5-3 
{width:100px;height:50px;position:absolute;} 
.divcss5-1{z-index:10;background:#000;left:10px;top:10px} 
.divcss5-2{z-index:20;background:#F00;left:20px;top:20px} 
.divcss5-3{z-index:15;background:#00F;left:30px;top:30px}

2、HTMLコードスニペット

<div class="divcss5-1"></div> 
<div class="divcss5-2"></div> 
<div class="divcss5-3"></div>

3、z-indexケースのスクリーンショット

div css z-indexの重複順序ケースのスクリーンショット

Z インデックス スタイルの実用的なサンプル ケース

ケースの説明:

3 つのボックスはすべて、絶対位置属性のposition:absolute styleを使用し、同じ高さと幅のスタイルを設定します。観察を容易にするために、左右の属性を使用し、異なる値を割り当てて順序を整えます。

Divcss5-1 ボックスの背景は黒、z-index:10

Divcss5-2 ボックスの背景は赤、z-index:20

Divcss5-3 ボックスの背景は青、z-index:15

は OK です最初のボックスの z-index: 10 は下部で重なり、2 番目のボックスの z-index: 20 は最大値であるため、上部で重なり、3 番目のボックスは z- を設定していることがわかります。インデックス: 15 で中央に配置されます。

IV. z-index の概要

実際の DIV+CSS レイアウトでは、z-index のオーバーラップ シーケンス スタイルを使用し、位置決めに左右を使用して、異なる z-index を介してレイヤーのオーバーラップを実現します。インデックス値を順番に並べます。

以上がcss z-indexレイヤーの重なり順例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。