[CSS] isolationで重ね合わせコンテキストの生成を指定しよう!

この記事は上記のような疑問を解消するものとなっています。

isolationは、要素をスタッキングコンテキストから分離する時に使用します。

スタッキングコンテキストとはWebページ上の仮想的な奥・手前方向の三次元概念です。

そこでこの記事ではisolationについて解説していきます。

気になる方は是非最後まで読んで頂ければと思います。

1.isolationとは?

isolationプロパティは要素が新しい重ね合わせコンテキストを生成する必要があるかどうかを指定します。

値の指定方法は以下の通りです。

{ isolation: 値; }

値の指定方法

2.isolationの使い方

それではisolationの使い方をみていきましょう。

.isolation-sample { 
 isolation: isolate;
}

上記のようにすることで新しい重ね合わせコンテキストを作成し、既存の重ね合わせコンテキストから分離します。

他にも値を設定できるのでいろいろと試してみることをお勧めします!