Eine eingehende Analyse des kaskadierenden Kontexts in CSS

In diesem Artikel geht es um den Kaskadenkontext in CSS und den Vergleich der Kaskadenebenen anhand von Beispielen. Ich hoffe, dass er für alle hilfreich ist!

Vor einiger Zeit begann das Unternehmen, das Geschäft mit Low-Code-Plattformen zu fördern, und ich hatte das Glück, daran teilzunehmen. Während dieser Zeit war der kaskadierende Kontext von CSS involviert, was mir einige Probleme bereitete. Um die Geschäftslogik besser zu implementieren, dachte ich, es wäre besser, den kaskadierenden Kontext von CSS eingehend zu studieren. Jeder muss wissen, dass Webseiten zweidimensional sind, der Inhalt jedoch dreidimensional ist. Zusätzlich zu den intuitiveren x- und y-Achsen gibt es auch eine nicht sehr intuitive z-Achse.

Kaskadierende Kontextelemente

In unserem täglichen Entwicklungsprozess gibt es mehrere häufig verwendete Attribute mit kaskadierendem Kontext:

• Position: absolut |. relativ |.z-Index

• Float: links |. richtig

• transformieren

• Einfacher Ebenenvergleich ohne Einbeziehung der Verschachtelung von Vorfahren und Enkeln:

z-Index: -1 0

Wenn ein Stapelkontext mit einem Vorfahrenelement generiert wurde, wird die Stapelebene des Nachkommenelements durch das Vorfahrenelement beeinflusst.

Hinweis:

Die kaskadierende Kontexthierarchie ist ein untergeordnetes Element der HTML-Elementhierarchie, da nur bestimmte Elemente kaskadierende Kontexte erstellen. Man kann sagen, dass Elemente, die keinen eigenen Stapelkontext erstellen, vom übergeordneten Stapelkontext assimiliert werden.

Praktische Probleme

Bei der visuellen Implementierung sind wir auf ein Problem gestoßen: Während des Drag-and-Drop-Vorgangs verschachtelter Ebenen wurden aufgrund der hierarchischen Probleme, die bereits bei den verschachtelten übergeordneten Elementen bestanden, die Vorfahrenelemente vom Vorfahren beeinflusst Die Auswirkung besteht darin, dass sie beim Ziehen durch Elemente des „normalen Dokumentenflusses“ abgedeckt werden. Nach einiger Zeit der Forschung wurde festgestellt, dass das Problem durch den Einfluss unterschiedlicher Stapelkontexte verursacht wurde. Praktischer Kampf

1. Vergleich kaskadierender Kontexte auf derselben Ebene

Da es zu viel Code gibt, werde ich hier keinen Platz verschwenden, um die Ergebnisse meiner Operation zu zeigen. Anhand der folgenden Bilder können wir den oben erwähnten hierarchischen Vergleich der gleichen Ebenen bestätigen.

2. Vergleich der Stapelkontexte verschiedener Positionen

Für die Position ohne Verwendung des Z-Index ist der Stapelkontext des Bruderelements größer als der Stapelkontext des Bruderelements. In menschlicher Hinsicht bedeutet dies, dass der kaskadierende Kontext der folgenden Elemente höher ist als der der vorherigen Elemente.

    .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. Vergleich der Stapelebenen in verschiedenen Stapelkontexten

Reproduzieren wir zunächst die oben genannten praktischen Probleme und implementieren wir die Stapelebenen in verschiedenen Stapelkontexten.

Der rote Block und der grüne Block sind zwei Elemente derselben Ebene. Die rote Stapelebene ist höher als die grüne Stapelebene. Daher haben die beiden Elemente im roten Block eine niedrigere Stapelebene Orange Blockelement, aber der tatsächliche Effekt ist Ja, Orange hat eine niedrigere Stapelebene als andere Blockelemente.

    .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;
    }

Hier möchte ich meine Lösung für das oben genannte Problem erwähnen, die darin besteht, die Kaskadenebene der Vorfahrenelemente dynamisch zu ändern. Ich persönlich bin jedoch der Meinung, dass diese Methode untersucht werden muss. Sie ist umständlich, wenn es viele Verschachtelungsebenen gibt. Wenn jemand eine bessere Möglichkeit hat, hinterlassen Sie bitte unten eine Nachricht.

(Teilen von Lernvideos:

CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonEine eingehende Analyse des kaskadierenden Kontexts in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!