1. Relative Positionierung
Das Offset-Element der relativen Positionierung bezieht sich auf das Element selbst und führt nicht dazu, dass das Element aus dem Dokumentfluss ausbricht. Der von der Anfangsposition des Elements eingenommene Platz bleibt erhalten
HTML-Code:
CSS-Code:
Webseiteneffekt:
Es ist ersichtlich, dass die relative Positionierung relativ zum Element selbst ist, das 30 Pixel von oben und 20 Pixel von links entfernt ist Nicht vom Dokumentfluss abbrechen
2. Absolute Positionierung
Absolute Positionierung Es ist relativ zum nächsten Vorgängerelement, das positioniert wurde. Wenn das nächste Vorgängerelement nicht positioniert ist, dann ist seine Position relativ zum ursprünglichen enthaltenden Block (. body)
CSS-Code:
Webseiteneffekt: 
Sie können sehen, dass die absolute Positionierung außerhalb des Dokumentflusses liegt, da das übergeordnete Element nicht positioniert ist, wird es mit dem ursprünglichen enthaltenden Block positioniert (Körper). Positionieren Sie nun das übergeordnete Element des Elements
CSS-Code:
Webseiteneffekt:
Nachdem das übergeordnete Element positioniert wurde, wird das Element basierend auf dem übergeordneten Element positioniert
3. Statische Positionierung
Keine besonderen Einstellungen, bricht nicht vom Dokumentenfluss ab und folgt der grundlegenden Positionierung. Es ist festgelegt, dass eine hierarchische Klassifizierung nicht über den Z-Index durchgeführt werden kann
CSS-Code:
Webseiteneffekt:
Es ist ersichtlich, dass sich die Position des roten Blocks nicht geändert hat, und Sie können wissen, dass statisch (statisch, Standardattribut) normalerweise nicht verwendet wird. Der Positionswert ist im Allgemeinen der Standardwert
4 Feste Positionierung
Behoben Die Positionierung erfolgt relativ zum Browserfenster, außerhalb des Dokumentflusses, und feste Elemente scrollen nicht mit dem Scrollen des Fensters
HTML-Code:
CSS-Code:
Webseiteneffekt (feste Positionierung nicht festgelegt):
Webseiteneffekt (feste Positionierung festgelegt)
Es ist ersichtlich, dass nach der festen Positionierung die Position des roten Blocks auch beim Scrollen des Fensters unverändert bleibt.
3. Relative und absolute Positionierung
Verwenden Sie drei Farbblöcke zur Unterscheidung zwischen relativer Positionierung und absoluter Positionierung
Wenn keine Positionierung durchgeführt wird, ist der Standard-Webseiteneffekt:
1. Relative Positionierung
CSS-Code:
Webseiteneffekt:
Das kann sein Ich habe gesehen, dass die relative Positionierung und die Standardpositionierung den gleichen Effekt haben. Aus dem Dokumentfluss
3. Relative Positionierung und absolute Positionierung
Um den Effekt deutlicher zu machen, sind die roten, gelben und blauen Farbblöcke bis zu einem gewissen Grad versetzt
(1) Relative Positionierung
CSS-Code :
Webseiteneffekt:
(2) Absolute Positionierung CSS-Code:
Webseiteneffekt:
4. Relative, absolute Positionierung und Floating
Absolute Positionierung und Floating liegen beide außerhalb des Dokumentenflusses
1. Relative Positionierung
CSS-Code:
Web Seiteneffekt:
2. Absolute Positionierung
CSS-Code:
Webseiteneffekt:
3. Floating
CSS-Code:
Webseiteneffekt:
Du kannst Beachten Sie, dass der Float (Float) Text ist, der den roten Farbblock umgibt, aber der Abstand zwischen dem Text und dem roten Farbblock zu gering ist. Der Rand kann nicht festgelegt werden
4 Relative Positionierung und Floating
CSS-Code:
Webseiteneffekt:
Die Kombination aus relativer Positionierung und Floating kann die Ränder zwischen dem Text und dem roten Farbblock festlegen
5. Absolute Positionierung und Floating
CSS-Code:
Webseiteneffekt:
5. Verwendung des Z-Index
Wenn Sie den Farbblock unten ändern möchten. Der mittlere rote Farbblock wird über dem gelben Farbblock angezeigt, können Sie den Z-Index
CSS-Code verwenden:
Webseiteneffekt:
Sie können sehen, dass der rote Farbblock über dem roten Farbblock angezeigt wird. Hier ist der Z-Index. Die Werte sind 40, 20 und 30. Tatsächlich Web Seiten haben manchmal mehr als diese, vielleicht Hunderte. Dies dient nur der Bequemlichkeit.
(Teilen von Lernvideos: CSS-Video-Tutorial, HTML-Video-Tutorial)
