Positionierung in H5

Dieses Mal werde ich Ihnen die Positionierung in H5 vorstellen. Was sind die Vorsichtsmaßnahmen für die Positionierung in H5?

1. Klassifizierung des Positionierungsflusses

1.1 Relative Positionierung
1.2Absolute Positionierung
1.3 Feste Positionierung
1.4 Statische Positionierung

2. Was ist relative Positionierung?

Relative Positionierung bedeutet, sich relativ zu Ihrer vorherigen Position im Standardablauf zu bewegen
Position: relativ;

Zu beachtende relative Positionierungspunkte

1. Die relative Positionierung weicht nicht vom Standardfluss ab und belegt weiterhin einen Platz im Standardfluss.
2 Bei der relativen Positionierung kann nur ein 3499910bf9dac5ae3c52d5ede7383485 für das Positionierungsattribut verwendet werden (Das heißt, wenn Sie links verwenden, verwenden Sie nicht rechts; wenn Sie oben verwenden, verwenden Sie nicht unten)5db79b134e9f6b82c0b36e0489ee08ed.
3 Da die relative Positionierung nicht vom Standardablauf abweicht, blockieren -Level-Elemente/Inline-Elemente werden in der relativen Positionierung unterschieden. Element/Inline-Block-Level-Element
4. Da die relative Positionierung nicht vom Standardfluss abweicht und relativ positionierte Elemente Positionen im Standardfluss einnehmen, werden beim Festlegen von Attributen wie z Als Rand/Auffüllung für relativ positionierte Elemente wirkt es sich auf das Layout des Standardflusses aus.3499910bf9dac5ae3c52d5ede7383485(Rand/Auffüllung wird vor der Positionierung zur Boxposition hinzugefügt)5db79b134e9f6b82c0b36e0489ee08ed

Relative Positionierung Anwendungsszenario

1. Wird zur Feinabstimmung der Elemente verwendet
2. Verwenden Sie es mit der absoluten Positionierung, die Sie später lernen werden

       .box2{
            background-color: green;
            position: relative; //相对定位
            top: 20px;
            left: 20px;
            margin-top: 20px;//会加在定位之前的位置上
        }

3. Was ist absolute Positionierung? >

Absolute Positionierung bedeutet Positionierung

Position relativ zum Körper: absolut;

Hinweise

1 Absolut positionierte Elemente liegen außerhalb des Standardflusses

2 Absolut positionierte Elemente nicht Unterscheiden Sie zwischen Elementen auf Blockebene/Inline-Elementen/Inline-Elementen auf Blockebene

.box2{
            background-color: green;
            position: absolute; //绝对定位
            left: 0;
            bottom: 0; //在body的左下角
        }

4. Absoluter Positionierungsreferenzpunkt

Regeln

1 Positionierte Elemente verwenden den Körper als Referenzpunkt, unabhängig davon, ob sie Vorfahrenelemente haben.

2 Wenn ein absolut positioniertes Element ein Vorfahrenelement hat und das Vorfahrenelement auch ein Positionierungsfluss ist, dann Das absolut positionierte Element verwendet das Vorgängerelement des Positionierungsflusses als Referenzpunkt

2.1 Solange es das Vorgängerelement dieses absolut positionierten Elements ist, kann es

2.2 Der Positionierungsfluss bezieht sich zur absoluten Positionierung/relativen Positionierung/festen Positionierung

2.3 Nur die statische Positionierung im Positionierungsfluss funktioniert nicht

3. Wenn ein absolut positioniertes Element ein Vorgängerelement hat und das Vorgängerelement auch vorhanden ist ein Positionierungsfluss, und es gibt mehrere Elemente im Vorgängerelement, die Positionierungsflüsse sind, dann verwendet das absolut positionierte Element den Positionierungsfluss, der ihm am nächsten liegt. Das Vorgängerelement ist der Referenzpunkt

5. Hinweise

1. Wenn ein absolut positioniertes Element den Körper als Referenzpunkt verwendet, verwendet es tatsächlich die Breite und Höhe des ersten Bildschirms der Webseite als Referenzpunkt, anstatt die Breite und Höhe des gesamten Webseite als Referenzpunkt;

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Webseiten-Layout-Methode – Clear Floats

Box-Modell von HTML und CSS

Das obige ist der detaillierte Inhalt vonPositionierung in H5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!