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

この記事では、CSS のカスケード コンテキストについて説明し、例を通じてカスケード レベルを比較します。

少し前、会社がローコードプラットフォームビジネスを推進し始め、私も幸運にもそれに参加することができました。この間、CSSのカスケードコンテキストが絡んでいて困ったことがありましたが、ビジネスロジックをより良く実装するためには、CSSのカスケードコンテキストを深く勉強した方が良いのではないかと思いました。 Web ページは 2 次元空間ですが、コンテンツは 3 次元であることは誰もが知っているはずです。より直感的な x 軸と y 軸に加えて、あまり直感的ではない Z 軸もあります。

カスケード コンテキスト要素

日常の開発プロセスでは、カスケード コンテキストに関連する一般的に使用される属性がいくつかあります:

• position: 絶対 | 固定 | 相対| スティッキー

• ##z-index

##float: 左 | 右
変換
スタッキング レベルの比較

祖先と孫のネストを含まない、単純なレベルの比較:

z-index: -1 ; float 0

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

注:

カスケード コンテキスト レベルは、特定の要素のみがカスケード コンテキストを作成するため、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;
    }

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

(学習ビデオ共有:

css ビデオ チュートリアル

)

以上がCSS のカスケード コンテキストの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。