CSS | z-indexの最大値と最小値は±2147483638、挙動など

2021-12-13CSS ポジション,CSS

CSSの表示順序を指定できるz-indexプロパティの最大値と最小値は±2147483638ですが、それより大きい値、または小さい値を指定した場合の挙動につて調べてみた結果を紹介しています。

最大値より大きい値、最小値より小さい値を指定した場合

z-indexの最大値と最小値、2147483638以上、または-2147483638をz-indexプロパティに指定した場合、親要素からの継承を引き継いだり、「0」として扱われたり無効になるわけではないようです。

See the Pen CSS | z-index by yochans (@yochans) on CodePen.

2,147,483,638は約21億ですので、HTML上手前にある要素から100億、100、0、-100、-100億と指定していき、 position: absolute で重ねてみました。

検証サンプルでは驚くほどに解りにくいですが、結果として「最大値以上の値は最大値として扱われ、最小値以下の値は最小値として扱われる」事がわかりました。

以下は検証に使った、HTMLとCSSのサンプルコードになります。

<div class='container'>
	<p class="z100M">100M</p>
	<p class="z100">100</p>
	<p class="z0">0</p>
	<p class="z-100">-100</p>
	<p class="z-100M">-100M</p>
</div>

.container {
	position: relative;
	height: 120px;
}

.container p {
	position: absolute;
	width: 100px;
	padding: 10px;
	color: white;
	text-align: center;
}

.z0 {
	top: 45px;
	left: 70px;
	background: #ff7f50;
	z-index: 0;
}
.z100 {
	top: 30px;
	left: 0px;
	background: #ff69b4;
	z-index: 100;
}

.z100M {
	top: 0;
	left: 20px;
	background: #4169e1;
	z-index: 10000000000;
}

.z-100M {
	top: 10px;
	left: 110px;
	background: #dc143c;
	z-index: -10000000000;
}

.z-100 {
	top: 40px;
	left: 155px;
	background: #008000;
	z-index: -100;
}