isolationプロパティの説明
CSSのisolationプロパティは、要素のスタッキング・コンテキストを制御します。スタッキング・コンテキストとは、要素が重なり合った時の仮想的な奥行きを表す概念です。
例えば、背景色を持つボックスが重なった時に透過やブレンドが指定されていた場合に、コンテキストを維持するのか分離するのかを選択できます。
isolationに指定できる値
auto- 既存のスタッキング・コンテキストを尊重します。
isolate- 新しいスタッキング・コンテキストを作成します。
isolationの使い方とサンプルコード
isolationプロパティの構文は以下の通りです。
/* キーワード値 */
isolation: auto;
isolation: isolate;
/* グローバル値 */
isolation: inherit;
isolation: initial;
isolation: revert;
isolation: unset;
isolationの実例
それでは実際にisolationプロパティの書き方を見ていきましょう。以下の例では、mix-blend-modeを使用して重なった要素の色調を混合しています。その重なり具合いをisolationで変更したものを比較します。
<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>
.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;
}