Zusammenfassung zur Positionierung in CSS

Es gibt vier Arten der Positionierung in CSS, die in verschiedenen Szenarien unterschiedliche Auswirkungen haben. Hier werde ich diese vier Arten der Positionierung kurz vorstellen.

Statische Positionierung: Es gibt nicht viele Anwendungsszenarien, daher werden wir sie hier nicht vorstellen.

Im Folgenden werden hauptsächlich drei weitere gängige Positionierungen vorgestellt

1. Position: Relative Positionierung: Wie der Name schon sagt, besteht die relative Positionierung darin, entsprechende Änderungen relativ zur ursprünglichen Position vorzunehmen. Es ist zu beachten, dass das Element nach dem Verschieben die ursprüngliche Position einnimmt (dies ist der wichtigste Punkt der relativen Positionierung).

Nachfolgend sehen Sie den Codedemonstrationsteil:

<Stil>
        * {
            Rand: 0;
            Polsterung: 0;
            /* Alle Ränder und Abstände hier löschen,
            Keine wirkliche Bedeutung, nur zur Vereinfachung der Beobachtung*/
        }
        
        .Rosa {
            Breite: 80px;
            Höhe: 80px;
            Hintergrundfarbe: rosa;
        }
        
        .lila {
            Breite: 80px;
            Höhe: 80px;
            Hintergrundfarbe: lila;
        }
        
        .Grün {
            Breite: 80px;
            Höhe: 80px;
            Hintergrundfarbe: grüngelb
        }
    </Stil>

Hier werden drei Divs definiert und mit den entsprechenden Farben versehen. Die laufenden Ergebnisse sind wie folgt

Wenn der untergeordneten Box die folgenden Positionierungsattribute zugewiesen werden

 .lila {
            Position: relativ;
            oben: 0;
            links: 80px;
            /* Dem obigen Feld wird eine relative Positionierung hinzugefügt.
            Und verschieben Sie es 80 Pixel relativ zu seinem Original*/
            Breite: 80px;
            Höhe: 80px;
            Hintergrundfarbe: lila;
        } 

Die Seite sieht dann so aus, was auch den wichtigsten Punkt bestätigt: Das Element wird nach dem Verschieben seine ursprüngliche Position einnehmen, andernfalls steht das grüne Kästchen oben.

2. Position: Absolute absolute Positionierung: Absolute Positionierung ist die Positionsänderung, die von seinem eigenen übergeordneten Element vorgenommen wird. Wenn das übergeordnete Element ein Positionsattribut hat, wird die entsprechende Bewegung basierend auf dem übergeordneten Element vorgenommen. Wenn das übergeordnete Element kein Positionsattribut hat (oder kein übergeordnetes Element vorhanden ist), wird die entsprechende Bewegung basierend auf dem Browser vorgenommen. Es ist zu beachten, dass das Element nach der Bewegung nicht die ursprüngliche Position einnimmt.
Nachfolgend sehen Sie eine Codedemonstration

.lila {
            Position: absolut;
            oben: 160;
            links: 80px;
            /* Das violette Kästchen hier hat kein übergeordnetes Element und wird daher je nach Browser positioniert*/
            Breite: 80px;
            Höhe: 80px;
            Hintergrundfarbe: lila;
        } 

Offensichtlich wird das grüne Kästchen nach oben geschoben, und dieses Ergebnis bestätigt die absolute Positionierung: Das Element nimmt nach dem Verschieben nicht die ursprüngliche Position ein.

3. Feste Positionierung: Die Position der festen Positionierung ist relativ zur gesamten Seite, unabhängig davon, ob ein übergeordnetes Element vorhanden ist. Ebenso behält die feste Positionierung die Position nicht bei

Zusammenfassen

Damit ist dieser Artikel über die Zusammenfassung der Positionierung in CSS abgeschlossen. Weitere Inhalte zur Positionierung in CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!