CSS を使用して div の z-index を操作する方法

z-indexこの属性を通常使用する必要がある場合は混乱しやすいので、今日は基本的な属性からオブジェクトの重なり順と重なり順の設定まで、z-index について概要を説明します。

z-index の構文と構造

z-index の後には特定の数値が続きます

例: p{z-index:100}

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

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

Z-index は、

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

z-index スタイル属性を観察しやすくするために、3 つの DIV ボックスを設定し、異なる

CSS 背景 カラーを設定し、同じ CSS 高さと CSS 幅を設定しました。背景色をそれぞれ黒、赤、青に設定します。 CSS の幅は 100px、CSS の高さは 50px

1、ケース CSS コード

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

2、HTML コード スニペット

<p class="p -1"></p> 
<p class="p -2"></p> 
<p class="p -3"></p>

Z-index スタイルの実践例 case

ケースの説明:

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

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

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

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

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

IV. z-index の概要 - TOP

実際の DIV+CSS レイアウトでは、z-index の重複シーケンス スタイルを使用します。これは、配置に左右を使用できます。異なる Z インデックス値が重複する順序で配置されます。

.p _right{ float

:right;width:150px;border:1px Solid #00F;height:50px}

.clear{ clear:both}

で z-index を操作する方法はたくさんありますCSS を必要とする友人はそれを保存し、このサイトの他の更新に引き続き注意してください。

関連書籍:

CSSのmargin属性の設定方法

DIVの背景色を設定する方法とは

DIV+CSSの使い方

以上がCSS を使用して div の z-index を操作する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。