Detaillierte Erläuterung der CSS-Positionierung – relative Positionierung, absolute Positionierung und feste Positionierung

Dieser Artikel vermittelt Ihnen relevantes Wissen über css, in dem hauptsächlich Probleme im Zusammenhang mit der relativen Positionierung, der absoluten Positionierung und der festen Positionierung von CSS vorgestellt werden. Das Positionsattribut in CSS hat vier Werte: relativ (Relative Positionierung), absolut (absolute Positionierung), statisch (statische Positionierung) und fest (feste Positionierung), passen Sie die Position des Elements durch oben, links, unten, rechts an. Ich hoffe, es wird für alle hilfreich sein.

(Lernvideo-Sharing: CSS-Video-Tutorial, HTML-Video-Tutorial)

1. Was ist Positionierung?

Das Positionsattribut in CSS hat vier Werte: relativ (relative Positionierung), absolut (absolute Positionierung), statisch (statische Positionierung) und fest (feste Positionierung) durch oben, links, unten und rechts 2. Die Rolle jedes Attributwerts. Attributwert. Rolle ute

absolute Positionierung

Referenz Letztes VorfahrenelementstatischStatische PositionierungGrundlegende PositionierungsregelnfestFeste PositionierungReferenzbrowserfenster

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)

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der CSS-Positionierung – relative Positionierung, absolute Positionierung und feste Positionierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!