プログラミング

z-indexでボックスの重なり順を指定する【CSS】

z-indexプロパティは、ボックスが重なる順番を指定するプロパティです。

{z-index: 重ね順;}

z-indexプロパティで重なり順を指定しなかったり、autoを指定すると、ボックスの重なり順は、HTMLソースに記述した順番に重ねられます。

上に赤・緑・青のボックスがありますが、ソースに記述した順番に重なっています。

重なり順を変えたいときは、pxなどの単位をつけた数値で指定します。

関連記事
CSSにおける長さ・大きさ・角度・時間の単位について【CSS】

上の例の場合、緑のボックスにz-indexプロパティで9999pxという値を指定したため、一番上に重ねられました。

指定した数値が大きくなるほど上(前)に重ねられるということです。

また、負の値を指定することもできます。

Leave a Comment