CSSのz-indexとpositionの使い方

z-indexとは？

z-index は、HTML要素の重なり順を制御するCSSプロパティです。値が大きいほど前面に、小さいほど背面に表示されます。ただし、z-index を適用するには position プロパティが適切に設定されている必要があります。

z-indexの基本的な使い方

.box1 {
  position: absolute;
  z-index: 10;
  background: red;
}

.box2 {
  position: absolute;
  z-index: 5;
  background: blue;
}

この場合、.box1 は .box2 よりも前面に表示されます。

positionプロパティ

position プロパティは、要素の配置方法を決定する重要なプロパティです。以下の5種類があります。

1. static（デフォルト値）

特に指定しない場合の値で、z-index は適用されません。

.box {
  position: static;
}

2. relative（相対配置）

要素を通常の位置から相対的に移動させます。

.box {
  position: relative;
  top: 20px;
  left: 10px;
}

3. absolute（絶対配置）

親要素（position: relative; または absolute fixed sticky のいずれかが設定されている）を基準に配置されます。

.container {
  position: relative;
}

.box {
  position: absolute;
  top: 50px;
  left: 30px;
}

4. fixed（固定配置）

ブラウザのビューポートに対して固定され、スクロールしても位置が変わりません。

.box {
  position: fixed;
  top: 0;
  right: 0;
}

5. sticky（スクロール時に固定）

スクロールすると特定の位置で固定される動きをします。

.box {
  position: sticky;
  top: 20px;
}

z-indexの注意点

• z-index を適用するには position が static 以外である必要があります。
• z-index の値が同じ場合、HTMLの記述順が前の要素が後ろに配置されます。
• z-index は親要素の影響を受けるため、意図した表示にならない場合は position の設定も確認しましょう。

まとめ

• z-index は要素の重なり順を制御する。
• position を適切に設定しないと z-index は機能しない。
• absolute fixed relative sticky などの position の使い方を理解することが重要。

z-index を適切に使いこなすことで、自由自在に要素の重なり順をコントロールできます！