CSS のカスケード コンテキストの詳細な分析

先祖要素を含むカスケード コンテキストが生成された場合、それは子孫になります要素のスタック レベルはその先祖の影響を受けます要素。

注:

カスケード コンテキスト レベルは、特定の要素のみがカスケード コンテキストを作成するため、HTML 要素レベルの子です。独自のスタッキング コンテキストを作成しない要素は、親のスタッキング コンテキストによって 同化されると言えます。

実際的な問題

ビジュアル実装のプロセス中に、問題が発生しました。ネストされたレベルのドラッグ アンド ドロップのプロセス中に、ネストされた親にすでにレベルが存在します。問題は、祖先要素と孫要素が祖先要素の影響を受け、ドラッグすると「通常のドキュメント フロー」要素によってカバーされてしまうことです。一定期間の調査の結果、この問題はさまざまなスタッキング コンテキストの影響によって引き起こされていることが判明しました。

実践

1. 同じレベルでのカスケードコンテキストの比較コードが多すぎるので、私の勝ちですここでスペースを無駄にしないでください。デモンストレーションが実行され、私の操作結果が直接アップロードされます。以下の写真を通して、上記の同じレベルの階層比較を確認できます。

2. さまざまな位置のスタッキングコンテキストの比較位置については、z を使用しません。 -index の場合、兄弟要素のカスケード コンテキストは兄弟要素のカスケード コンテキストより大きくなります。人間の言葉で言えば、次の要素のカスケード コンテキストが前の要素のコンテキストよりも高いことを意味します。

    .fixed {
      position: fixed;
      top: 0;
      left: 0;
      background: red;
    }

    .relative {
      position: relative;
      top: 20px;
      left: 20px;
      background: green;
    }

    .absolute {
      position: absolute;
      top: 60px;
      left: 60px;
      background: yellow;
    }

    .sticky {
      position: sticky;
      top: 60px;
      left: 90px;
      background: pink;
    }

3. さまざまなスタッキング コンテキストでのスタッキング レベルの比較まず、それを再現してみましょう。前述の実際的な問題は、さまざまなカスケード コンテキストでのカスケード レベルの実装です。

赤いブロックと緑のブロックは 2 つの兄弟要素です。赤のスタッキング レベルは緑のスタッキング レベルよりも高いため、赤のブロック内の 2 つの要素は次のようになります。スタッキング レベル。オレンジ色のブロック要素よりも低くなりますが、最終的な効果としては、オレンジ色のスタック レベルが他のブロック要素よりも低くなります。

    .purple {
      top: 20px;
      left: 20px;
      background: purple;
      z-index: 10;
    }

    .pink {
      top: 60px;
      left: 60px;
      background: pink;
      z-index: 20;
    }

    .orange {
      top: 10px;
      left: 10px;
      background: orange;
      z-index: 999;
    }

ここで、上記の問題に対する私の解決策について触れておきます。それは、祖先要素のカスケード レベルを動的に変更することです。ただ、ネストの階層が多いと面倒なので、この方法は研究が必要だと個人的に感じています。誰かがより良い方法を持っている場合は、以下にメッセージを残してください。

(学習ビデオ共有:

)