Detaillierte Erläuterung der Positionierungsattributposition: relativ und absolut

Positionierungs-Tag: Position

enthält Attribute : relativ (relativ)

                                                                                                                                          position:relative; Wenn Sie ein Element relativ positionieren, zuerst es wird an seinem Standort angezeigt. Anschließend verschieben Sie das Element „relativ“ zu seinem ursprünglichen Startpunkt, indem Sie eine vertikale oder horizontale Position festlegen. (Noch ein Punkt: Bei der relativen Positionierung nimmt das Element unabhängig davon, ob es verschoben wird oder nicht, immer noch den ursprünglichen Platz ein. Wenn Sie das Element verschieben, werden daher andere Felder abgedeckt.)

Relative Positionierung: Relative Positionierung bricht nicht vom normalen Dokumentfluss ab und wird festgelegt. Das Element wird relativ zu seiner ursprünglichen Position positioniert und seine ursprünglichen Platzhalterinformationen sind weiterhin vorhanden.

2.position:absolute bedeutet

absolute Positionierung

, und die Position wird basierend auf der oberen linken Ecke des Browsers berechnet. Durch die absolute Positionierung wird das Element aus dem Dokumentenfluss entfernt, sodass es keinen Platz einnimmt. Elemente im normalen Dokumentenfluss werden so angeordnet, als ob absolut positionierte Elemente nicht vorhanden wären. (Da absolut positionierte Boxen nichts mit dem Dokumentenfluss zu tun haben, können sie andere Elemente auf der Seite überdecken und ihre hierarchische Reihenfolge kann über Z-Index gesteuert werden. Je höher der Z-Index, desto besser sichtbar ist. Auf der oberen Ebene.) Absolute Positionierung: Die Waschung ist vom Dokumentenfluss und dem

schwebenden

-Modell getrennt und existiert unabhängig von anderen Objekten, ohne Platzhalter. 3. Nachdem der übergeordnete Container die relative Positionierung und das untergeordnete Element die absolute Positionierung verwendet, ist die Position des untergeordneten Elements nicht mehr relativ zur oberen linken Ecke des Browsers, sondern relativ zur oberen linken Ecke von das übergeordnete Fenster

unten Spezifische Fallbeschreibung:

1. Wenn c in b verschachtelt ist und b und c beide relativ positioniert sind, ist die relative Positionierung von c relativ zu b, b behält die Platzhalterinformationen und b behält die Platzhalterinformationen von c bei.

2. Wenn c in b verschachtelt ist, b absolut positioniert ist und c relativ positioniert ist, dann hat b keinen Float mehr und verfügt über keine Platzhalterinformationen, während c relativ zu b positioniert ist und der Platzhalter in b vorkommt.

3. Wenn a, b, c, d nebeneinander liegen und alle in einem Div mit der ID der Gruppe verschachtelt sind, und:

#group{potion:relative;

height

:200px;width: 4oopx ;}       #b{potision:absolute;left:20px;top:20px;}Auf diese Weise wird das übergeordnete Element relativ positioniert, aber die Werte von left und top werden nicht festgelegt als Floating-Objekt, und b ist absolut positioniert, sodass es keinen Platz einnimmt. Da das übergeordnete Element jedoch relativ positioniert ist, wird die absolute Positionierung hier zur absoluten Positionierung relativ zum übergeordneten Element und nicht relativ zum Browser. Zum Beispiel:

(1) Wenn position: absolute auf a eingestellt ist, wird a vom normalen Dokumentenfluss getrennt und a nimmt keine Position ein, d. h. b ist Nicht mehr basierend auf einem, sondern direkt von der übergeordneten Position aus starten. (Die b-Position ist die gleiche wie ohne a).

<div id="main">
<div id="a">aaaaaaaaaa</div>
<div id="b">bbbbbbbb</div>
</div>

Wenn position:relative für a festgelegt ist (ohne den Dokumentenfluss zu unterbrechen), nimmt a die Position A ein, wird relativ zu seiner ursprünglichen Position positioniert und scheint auf der Hauptposition zu schweben. während b Es wird auf die ursprüngliche Weise arrangiert und von a nicht beeinflusst. (Die Position von b ist dieselbe wie wenn a kein Positionsattribut hat)

(2) Wenn Sie position: relative/absolute für main festlegen, ist die absolute oder relative Positionierung von a oder b im Inneren relativ zum übergeordneten Element Element main, Dann gemäß der relativen oder absoluten Methode positionieren

Hinweis: Wenn das übergeordnete Element keinen gültigen Breiten- und Höhenwert festlegt, wird b absolut relativ zur oberen rechten Ecke des letzten Elements in der Gruppe positioniert Es müssen Breite und Höhe des übergeordneten Elements festgelegt werden. ! ! ! ! !

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Positionierungsattributposition: relativ und absolut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!