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

isolationについて知りたい人

isolationについて知りたいな!

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

この記事でお話すること
  • isolationとは?
  • isolationの使い方

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

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

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

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

isolationの評価
頻出度
(1.0)
重要度
(1.0)
総合評価
(1.0)

1.isolationとは?

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

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

{ isolation: 値; }

値の指定方法

  • auto
  • isolate




2.isolationの使い方

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

.isolation-sample { 
 isolation: isolate;
}

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

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




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です