CSSのz-indexプロパティの使い方

z-indexプロパティは、要素の重なる順番を指定することができるプロパティです。これを利用することで、よりcssでのデザインにバリエーションが増えます。

そんなz-indexプロパティの使い方について、今回はご紹介します。

z-indexプロパティとは

先ほども記述した様に、z-indexプロパティでは要素の重なる順番を指定することができます。Y軸が縦方向、X軸が横方向なのに対し、Z軸は重なりのことです。

基本的には、値が大きいものが前面に来ます。z-indexに使用できる値は、デフォルトのautoか整数です。autoを使用するとデフォルトの位置、つまり親要素と同じ位置になります。

z-indexプロパティの使い方

positionプロパティを使うと、要素を重ねて表示させることができます。その時に、普通に記述しただけだと記述した順番に重なって表示されます。その順番を指定できるのがz-indexタグというわけです。

指定したい要素に以下の記述を追加して使用します。

ポジションプロパティと併用するプロパティになりますが、position: staticでは使用することができません。relative, absolute, fixedのどれかを使用してる時に限ります。

このいずれかが指定されている時は、既に自動でz-indexのautoが指定されています。この場合は、通常通りの記述した順番で重なって表示されます。