isolation：要素のスタッキング・コンテキストを制御する

isolationプロパティの説明

isolationは、要素のスタッキング・コンテキストを制御します。スタッキング・コンテキストとは、要素が重なり合った時の仮想的な奥行きを表す概念です。

例えば、背景色を持つボックスが重なった時に透過やブレンドが指定されていた場合に、コンテキストを維持するのか分離するのかを選択できます。

isolationに指定できる値

auto

既存のスタッキング・コンテキストを尊重します。

isolate

新しいスタッキング・コンテキストを作成します。

isolationの使い方とサンプル

isolationプロパティの構文は以下の通りです。

/* キーワード値 */
isolation: auto;
isolation: isolate;

/* グローバル値 */
isolation: inherit;
isolation: initial;
isolation: revert;
isolation: unset;

isolationの実例

それでは実際にisolationプロパティの書き方を見ていきましょう。以下の例では、mix-blend-modeを使用して重なった要素の色調を混合しています。その重なり具合いをisolationで変更したものを比較します。

.samp_box {
	overflow: auto;
	padding: 1rem;
	background: #eee;
	text-align: center;
	display: grid;
	grid-template: 1fr / 1fr 1fr;
}
.samp_box > div {
	position: relative;
	border: 10px solid #09f;
	background-color: #f00;
	width: 50%;
	height: 240px;
}
div > h2 {
	position: absolute;
	top: -20px;
	left: -10px;
	padding: 0 .3rem;
	background-color: #09f;
	color: #fff;
	font-size: 1rem;
}
div > div {
	position: absolute;
	width: 100%;
	height: 60px;
	left: 70px;
	mix-blend-mode: difference;
}
#item1 {
	top: 10px;
	background-color: #ff6600;
}
#item2 {
	top: 80px;
	background-color: #0066ff;
}
#item3 {
	top: 150px;
	background-color: #ff0066;
}
.iso_auto {
	isolation: auto;
}
.iso_iso {
	isolation: isolate;
}

<section class="samp_box">
	<div class="iso_auto">
		<h2>auto</h2>
		<div id="item1">#ff6600</div>
		<div id="item2">#0066ff</div>
		<div id="item3">#ff0066</div>
	</div>
	<div class="iso_iso">
		<h2>isolate</h2>
		<div id="item1">#ff6600</div>
		<div id="item2">#0066ff</div>
		<div id="item3">#ff0066</div>
	</div>
</section>