CSSのz-indexで要素の重なり順序を制御する方法をわかりやすく解説

z-indexプロパティは、要素が重なったときにどの要素が手前に表示されるかを指定するために使用されます。
値が大きい要素ほど前面に表示され、値が小さい要素は背面に表示されます。このプロパティを使用することで、重なり順を調整し、視覚的なレイアウトを整えることが可能です。

z-indexプロパティの値とその効果の一覧

• 数値: 数値が高いほど上部となります。デフォルトは0。
• auto: 要素がz-indexを持たず、他の要素と重なった場合は、HTMLのソース順に従って表示されます。

注意点や関連情報

z-indexは、要素がpositionプロパティでrelative、absolute、fixed、stickyのいずれかが設定されている場合にのみ効果を持ちます。
また、z-indexの値が負の場合、要素はさらに背面に表示されます。z-indexの設定がない場合は、ブラウザはHTMLのソース順で表示を行います。

z-indexが効かない時の原因と対策

positionプロパティが設定されていない

z-indexは、要素のスタッキング順序（重なり順）を制御しますが、positionプロパティがstatic（デフォルト値）の場合、z-indexは機能しません。positionがrelative、absolute、fixed、またはstickyに設定されていないと、z-indexを使用しても効果が現れません。

対策: positionプロパティをrelative、absolute、fixed、またはstickyに設定します。例えば、position: relative; z-index: 10;のように指定して、z-indexが機能することを確認します。

共通するCSSコード

.css-sample-container {
    border: 1px solid #333;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
    max-width: 100%;
    height:360px;
    box-sizing: border-box;
    position: relative;
}
    

z-index: 1

この要素はz-indexが1で、他の要素よりも背面に表示されます。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-z-index-1">z-index: 1</div>
    <div class="css-sample-z-index-2">z-index: 2</div>
    <div class="css-sample-z-index-3">z-index: 3</div>
</div>
    

CSSコード

.css-sample-z-index-1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 1;
    width: 200px;
    height: 200px;
    background-color: lightblue;
}
    

表示例

まとめ

• z-indexプロパティは、要素が重なった場合の表示順を制御します。
• auto: z-indexを設定しない場合、HTMLのソース順に従って表示されます。