z-IndexおよびStackingコンテキスト

8628 ワード
CSS3 テキストリンク
基本的に、z−indexは層順序を指す.PSを考えればいいのですが、ベースの層があれば、上にコンポーネントがいっぱい積まれています.
z-indexの数が大きいほど、上へ進みます.しかし、z-indexの値が大きいだけでは制御できない場合が多い!
<style>
  header {
    position: relative;
    z-index: 2;
  }
  .tooltip {
    position: absolute;
    z-index: 999999;
  }
  main {
    position: relative;
    z-index: 1;
  }
</style>

<header>
  My Cool Site
</header>
<main>
  <div class="tooltip">
    A tooltip
  </div>
  <p>Some main content</p>
</main>
上記のコードがある場合、一番上のコードは何ですか?
単純に考えると9999999999の中で独立した位置を持つツールチップが一番上だと思われますが、タイトルで覆われます.
The root context
  • header
  • main
    -- tool tip
    • stacking contexts
    PSのレイアウトを組み合わせたように、要素を<div></div>のようなラベルに組み合わせます.하나의 쌓임 맥락은 부모 쌓임 맥락 안에서 통째로 하나의 단위로 간주됩니다. -mdn要素にz-indexが指定されている場合、この値は同じコンテキストの要素と比較されます.z-index値はグローバルではありません.
    このコンテキストを作成する一般的な方法は、次のとおりです.
    .some-element {
  position: relative;
  z-index: 1;
}
    では、上記の例にツールチップを表示するにはどうすればいいのでしょうか.
    実際には、mainはスタックコンテキストを生成する必要はありません.
    <style>
  header {
    position: relative;
    z-index: 2;
  }
  .tooltip {
    position: absolute;
    z-index: 999999;
  }
  main {
    position: relative;
    /* No more z-index here! */
  }
</style>

<header>
  My Cool Site
</header>
<main>
  <div class="tooltip">
    A tooltip
  </div>
  <p>Some main content</p>
</main>
    Z-indexがない場合、mainはスタックコンテキストを作成しないため、階層構造が変化します.
    The root context
  • header
  • tool tip
    • タイトルとツールチップが同じコンテキストに存在するため、zインデックス値を比較すると、より大きなツールチップが得られます.
    ここでは親子関係については議論しません.ツールチップがタイトルよりも深く重なっているかどうかにかかわらず.ブラウザはスタックコンテキストにのみ興味を持っています.josh
    ただし、mainがz-index値を使用する必要がある場合、またはスタックコンテキストを作成する必要がありますか?
    CSSのルールでは、スタックのコンテキストを「無効」にすることはできません.1つのスタックコンテキストの要素は、別のスタックコンテキストの要素と比較できません.
    ツールチップ値は<body>に割り当てられ、CSSを使用して要素のサブ要素のように見えるように適切に配置できます.これは、キーボードナビゲーションを使用するユーザー体験を予期せぬ中断を避けるために、高度な技術です.😅
    z-index、位置値を除く
    スタックコンテキストを生成する場合
  • 1未満の不透明度値
    • を設定します.
  • は、固定ロールガム
    • として位置決め.
  • の非正常なmix-blend-mode値
    • を適用
  • display:flex or display:gridとして指定されたコンテナでサブエレメントにz-index値を指定すると
    • になります.
  • 変換、フィルタ、クリップパス、またはパースビュー
    will-changeを
  • 不透明度or transform等値に一緒に適用すると
  • 独立性:孤立コンテキストを明確に作成する場合
    etc...
    • z-indexはpositionに設定してから動作しなければならない.そうですか.
    一般的に、z-indexは位置決め設定値でのみ動作します.
    ただしflexでは、位置がデフォルト値(static)の場合でも動作します.
    考えるべき問題は?
    z-インデックスの使用は、通常、親スタックコンテキストで
    は、要素を上または下に移動するときです.
    スタックコンテキストを生成すると、すべてのサブボディが平面化され、正確な診断が困難なエラーが発生します.しかし、すべてのことをグローバルに比較することは、本当に良い方法になるのだろうか.
    isolation
    .wrapper {
  isolation: isolate;
}
    isolationスタックコンテキストは、可能な限り最も純粋な方法で生成される.
  • z-index値は必要ありません.
  • の位置のデフォルト(静的)で使用できます.
  • サブエレメントのレンダリングには影響しません.
    • ブラウザのサポートもよく、IEを考慮する必要があります.transform: translate(0px);の代わりに使うのもいいと言われていますが、転体属性を使うなら試してみなければなりません.
    毎日『トランスフォーマー』と言って『トランスフォーマー』を混同する人.✋🏻 わたしは….
    https://www.joshwcomeau.com/css/stacking-contexts/
    博大で奥深いcss世界😶‍🌫️
    スイフトの代表パターン
    androidコンパイル問題解決レコード