どのCSSプロパティがスタッキングコンテキストを作成しますか？
スタッキングコンテキスト について勉強していて、スタッキングコンテキストを作成するプロパティを使用していくつかのテストを行っています。
いくつかのテストを行ったところ、もちろん、z-indexに加えて、次のプロパティもスタッキングコンテキストを作成することがわかりました。
transform以外none;opacity1以外;- そして
perspective。
スタッキングコンテキストを適用する他のプロパティはありますか？
次のシナリオの1つ以上により、要素が独自のスタッキングコンテキストを確立します1 その子孫のために：
ルート要素は常にルートスタッキングコンテキストを保持します。これが、ルート要素を最初に配置しなくても要素の配置を開始できる理由です。ローカルスタッキングコンテキスト（以下の他のシナリオのいずれかによって生成された）にまだ参加していない要素は、代わりにルートスタッキングコンテキストに参加します。
z-indexを、配置されている要素（つまり、autoではないpositionを持つ要素）のstatic以外に設定します。この動作は、
position: fixedの値に関係なく、常にスタッキングコンテキストを確立するように、z-indexを持つ要素に対して変更される予定であることに注意してください。一部のブラウザはこの動作を採用し始めていますが、変更はCSS2.1または新しい CSS配置レイアウトモジュール のいずれにもまだ反映されていないため、信頼するのは賢明ではないかもしれません。今のところこの振る舞いについて。この振る舞いの変化は、 私の別の回答 で調査され、 この記事 と このCSSWGテレコン議事録のセット 。
これに対するもう1つの例外は、 flexアイテム の場合です。フレックスアイテムに
z-indexを設定すると、配置されていなくても、常にスタッキングコンテキストが確立されます。
opacityを1未満に設定します。要素の変換 ：
transformをnone以外に設定します。transform-styleをpreserve-3dに設定します。perspectiveをnone以外に設定します。
ページメディア では、各 ページマージンボックス が独自のスタッキングコンテキストを確立します。
で変更 し、
will-changeを、初期値以外の値がスタッキングコンテキストを作成するプロパティに設定します。
ブロックフォーマットコンテキスト はスタッキングコンテキストと同じではないことに注意してください。実際、これらは2つの完全に独立した（相互に排他的ではありませんが）概念です。
1これには、疑似スタッキングコンテキスト、独立したスタッキングコンテキストのように動作する ものを単に指す非公式の用語は含まれません ポジショニングに関してですが、実際には親スタッキングコンテキストに参加しています。