ホームページ > ウェブフロントエンド > CSSチュートリアル > どの CSS プロパティがスタッキング コンテキストをトリガーしますか?

どの CSS プロパティがスタッキング コンテキストをトリガーしますか?

Linda Hamilton
リリース: 2024-12-18 00:55:14
オリジナル
366 人が閲覧しました

What CSS Properties Trigger a Stacking Context?

スタッキング コンテキストを作成する CSS プロパティはどれですか?

スタッキング コンテキストは、Web ページ上で要素が重なって表示される順序を制御するために不可欠です。 。さまざまな CSS プロパティを使用して、新しいスタッキング コンテキストの作成をトリガーし、要素とその子孫をレイアウト フローから効果的に分離できます。

スタッキング コンテキストを作成するプロパティ:

広く知られている z-index に加えて、次のプロパティはスタッキング コンテキストを確立します:

  1. transform: none 以外の任意の変換値
  2. opacity: 1 未満の任意の値
  3. perspective: none 以外の任意の値

スタッキング コンテキストに影響するその他のプロパティ:

これらのコア プロパティに加えて、次のシナリオもトリガーされます。スタッキングコンテキストの作成:

  • z-index: 位置決めされた要素の z-index を自動以外の値に設定します (一部のブラウザーの固定要素を除く)
  • フロー-from: ページ化された通常の
  • ページマージンボックス以外のコンテンツを含む要素の flow-from を none 以外の値に設定します。 media
  • filter: フィルターを none 以外の値に設定します
  • isolation と mix-blend-mode: 合成とブレンドで両方のプロパティを設定します
  • will-change: 設定は- スタッキング コンテキスト
  • クリップ パスとマスクを作成するプロパティに変更します。どちらかのプロパティを none 以外の値に設定します。マスキング

注: スタッキング コンテキストは、要素内のブロック要素のレイアウトを制御するブロック フォーマット コンテキストとは異なります。

以上がどの CSS プロパティがスタッキング コンテキストをトリガーしますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート