【CSS】z-indexとは?

CSSの「z-index」プロパティは、HTML要素の重なり順を指定するプロパティです。

重なり順とは、HTML要素が画面上に表示される順番のことを言います。要素が前面に表示されるのか、背面に表示されるのかは、z-index の値によって決まります。

z-index の値は、整数を指定します。数値が大きいほど、要素は前面に表示されます。z-indexの値が同じ場合は、後に指定した要素が前に表示されます。

例えば、以下のように、HTML要素にz-indexを指定することで、要素の重なり順を調整することができます。

.element-1 {
  z-index: 1;
}
.element-2 {
  z-index: 2;
}

この場合、element-2要素は、element-1要素の上に表示されます。

注意点として、z-indexが有効になるためには、要素にpositionプロパティを指定して、要素が絶対位置に配置されていることが必要になります。通常、position: absolute, position: relative, position: fixed の中のいずれかを使用します。

z-indexプロパティを使用することで、Webページのレイアウトを詳細に調整することができます。これにより、より視認性の高いWebページを作成することができます。