HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM スタイルの zIndex プロパティの使い方を徹底解説

HTML DOM の style.zIndex プロパティは、HTML ドキュメント内で位置指定（positioned）された要素の重ね合わせ順序（スタッキング順序）を取得および変更するために使用されます。zIndex の値が大きい要素ほど手前に表示され、値が小さい要素ほど奥に表示されます。

構文

zIndex プロパティの構文は以下の通りです。

zIndex の値を取得する場合

object.style.zIndex

zIndex の値を設定する場合

object.style.zIndex = "value"

設定できる値

value には以下の値を指定できます。

値説明
initialこのプロパティの値をデフォルト値に設定します。
inherit親要素からこのプロパティの値を継承します。
autoHTML ドキュメント内の出現順に従って要素が重ねられます。
number（整数）要素のスタック順序を指定する整数値です。数値が大きいほど手前に表示されます。

注意点

zIndex プロパティは、position プロパティが relative、absolute、fixed、sticky のいずれかに設定されている要素に対してのみ有効です。初期値である static の要素には効果がないため、実装時には注意しましょう。

サンプルコード

HTML DOM の style.zIndex プロパティを使用した具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        height: 100vh;
    }
    .box1 {
        width: 100px;
        height: 100px;
        background: lightcoral;
        position: relative;
        top: 50px;
    }
    .box2 {
        width: 100px;
        height: 100px;
        background: lightgreen;
        position: relative;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem 0;
}
</style>
</head>
<body>
<h1>DOM Style zIndex Property Example</h1>
<div class='box1'></div>
<div class='box2'></div>
<button onclick="add()" class="btn">Change zIndex</button>
<script>
    function add() {
        document.querySelector('.box1').style.zIndex = "1";
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のように表示されます。

HTML DOM スタイルの zIndex プロパティの使い方を徹底解説

「Change zIndex」ボタンをクリックすると、赤いボックスと緑のボックスの重なり順が入れ替わります。

HTML DOM スタイルの zIndex プロパティの使い方を徹底解説

  1. HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説

    HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる

  2. HTML DOM スタイルの quotes プロパティの使い方を徹底解説

    HTML DOM の style オブジェクトの quotes プロパティは、HTML ドキュメント内で引用文を囲むために使用される引用符（クォーテーションマーク）の種類を取得・変更するためのプロパティです。主に <q> 要素や <blockquote> 要素など、引用を表す要素と組み合わせて利用されます。 構文 quotes プロパティの基本的な構文は以下のとおりです。 値の取得 object.style.quotes 値の設定 object.style.quotes = value 設定できる値 value には以下の値を指定できます。 値説明 inheri