Detaillierte Erläuterung des durch die CSS-Positionierung verursachten hierarchischen Beziehungsproblems

Absolute, relative und fixe Positionierung

1. absolut: Absolute Positionierung, wobei oben, unten, links und rechts entsprechend dem übergeordneten Element positioniert wird. Wenn kein übergeordnetes Element vorhanden ist, wird es relativ zum Body-Element positioniert, d. h. zum gesamten Seitendokument.
2. Relativ: Relative Positionierung, Positionierung relativ zur ursprünglichen Position
3. fest: absolute Positionierung, Positionierung relativ zum Browserfenster (feste Positionierung hält das Element an einer bestimmten Position im Browser und ändert sich nicht, wenn die Bildlaufleiste scrollt)

Hierarchische Beziehungsprobleme aufgrund der Position

Zunächst müssen wir wissen, dass das CSS-Attribut tatsächlich ein dreidimensionaler Raum mit x-, y- und z-Achsen ist, die hierarchische Beziehung auf der z-Achse jedoch nur widergespiegelt wird, wenn wir die Positionspositionierung verwenden, d. h. das z-index-Attribut ist nur für positionierte Elemente verfügbar. Lassen Sie uns nun diese hierarchischen Beziehungen analysieren.

Die hierarchische Beziehung ist wie folgt:

• Die Z-Index-Eigenschaft ist nur für positionierte Elemente verfügbar
• Die Standardebene eines Elements mit einem Positionierungsattribut ist 0. Wenn die Ebenen gleich sind, steht das folgende Element oben, was als Z-Index verstanden werden kann: 0+
• Das absolut positionierte Element verschiebt die Y-Achse des folgenden Elements nach oben. Es ist klar, dass das Element nach der absoluten Positionierung zu einem Element auf Zeilenebene wird.
• Je größer der Z-Index-Wert, desto näher ist er an unserem Beobachter, z. B. liegt Z-Index: 2 auf der oberen Ebene von Z-Index: 1

Nur Geschwisterpositionierungselemente können Ebenen vergleichen

Lassen Sie uns die oben aufgeführten Punkte analysieren:

Lassen Sie uns den ersten Punkt analysieren

<Stil>
.c1{
    Breite: 100px;
    Höhe: 100px;
    Hintergrundfarbe: rgb(255, 0, 0);
}
.c2{
    Breite: 200px;
    Höhe: 100px;
    Hintergrundfarbe: rgb(0, 0, 255);
    Position: absolut;
    oben: 50px;

           }
</Stil>
<Text> 
        <div Klasse="c1">c1</div>
        <div class="c2">&nbsp&nbsp&nbsp&nbsp&nbspc2</div>
</body>

Zu diesem Zeitpunkt befindet sich c2 auf einer höheren Ebene und sollte auf c1 gestapelt werden.

Lassen Sie uns den zweiten Punkt analysieren

<style type="text/css">
           .c1{
                Breite: 100px;
                Höhe: 100px;
                Hintergrundfarbe: rgb(255, 0, 0);
                Position: relativ;

           }
           .c2{
                Breite: 200px;
                Höhe: 100px;
                zurück

Zu diesem Zeitpunkt haben die positionierten Elemente eine Hierarchie, und die folgenden Elemente stehen oben

Lassen Sie uns den dritten Punkt analysieren

<style type="text/css">
         .c1{
                Breite: 100px;
                Höhe: 100px;
                Hintergrundfarbe: rgb(255, 0, 0);
                Position: relativ;

Zu diesem Zeitpunkt wird c3 c2 direkt abdecken, da die Positionierung von c2 absolut ist und die folgenden Elemente zu c2 verschoben werden. Vom zweiten Punkt aus können wir sehen, dass c3 über c2 liegt, sodass c3 c2 direkt abdeckt.

Lassen Sie uns den vierten Punkt analysieren

<style type="text/css">
           .c1{
                Breite: 100px;
                Höhe: 100px;
                Hintergrundfarbe: rgb(255, 0, 0);
                Position: relativ;

c1 und c2 sind beide positionierte Elemente mit einem Standard-Z-Index von 0. Setzen Sie den Z-Index von c1 auf 1, sodass c1 über c2 liegt.

Lassen Sie uns den fünften Punkt analysieren

<style type="text/css">
           .c1{
                Breite: 100px;
                Höhe: 100px;
                Hintergrundfarbe: rgb(255, 0, 0);
                Position: relativ;

           }
           .c2{
                Breite: 200px;
                Höhe: 100px;
                Hintergrundfarbe: rgb(0, 0, 255);
                Position: absolut;
                Z-Index: 1;
           }
</Stil>
<Text>
        <div Klasse="c2">
            &nbsp&nbsp&nbsp&nbsp&nbsppc2
            <div Klasse="c1">c1</div>
        </div>
</body>

Setzen Sie c1 in c2. Selbst wenn der Z-Index von c2 auf 1 gesetzt ist, liegt c1 immer noch über c2, was bedeutet, dass verschachtelte Elemente keine hierarchische Beziehung haben. Nur Geschwisterelemente haben eine hierarchische Beziehung.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.