Was sind die relativen Positionierungsmodi von Elementen?

Zu den relativen Positionierungsmodi von Elementen gehören relative Positionierung, absolute Positionierung, feste Positionierung und klebrige Positionierung. Detaillierte Einführung: 1. Die relative Positionierung ist der grundlegendste relative Positionierungsmodus. Durch Festlegen des Positionsattributs eines Elements kann eine Feinabstimmung oder ein Versatz des Elements relativ zu seiner normalen Position erfolgen vom Dokumentfluss entfernt. Nimmt immer noch den ursprünglichen Platz ein. 2. Die absolute Positionierung erfolgt relativ zum nächstgelegenen Vorgängerelement, indem das Positionsattribut des Elements auf „absolut“ gesetzt wird usw.

Das Betriebssystem dieses Tutorials: Windows 10-System, DELL G3-Computer.

Im Webdesign und -layout ist die relative Positionierung von Elementen eine gängige Positionierungsmethode, mit der ein Element relativ zu seiner normalen Position leicht angepasst oder versetzt wird. Durch die relative Positionierung können wir die Position eines Elements auf der Seite steuern, indem wir sein Positionsattribut festlegen, ohne das Layout anderer Elemente zu beeinflussen. Der relative Positionierungsmodus von Elementen wird im Folgenden ausführlich vorgestellt.

1. Relative Positionierung (relativ)

Relative Positionierung ist der grundlegendste relative Positionierungsmodus. Ein Element kann relativ zu seiner normalen Position verschoben oder versetzt werden, indem seine Positionseigenschaft auf relativ gesetzt wird. Durch die relative Positionierung wird das Element nicht aus dem Dokumentfluss entfernt und nimmt weiterhin seinen ursprünglichen Platz ein. Sie können die Eigenschaften „top“, „bottom“, „left“ und „right“ verwenden, um den Versatz eines Elements relativ zu seiner normalen Position festzulegen. Diese Eigenschaften können mithilfe spezifischer Pixelwerte, Prozentwerte oder anderer Einheiten angegeben werden.

2. Absolute Positionierung (absolut)

Die absolute Positionierung erfolgt relativ zum nächstgelegenen positionierten Vorgängerelement (nicht statische Positionierung). Sie können ein Element relativ zu seinem nächsten positionierten Vorgänger positionieren, indem Sie seine Positionseigenschaft auf „absolut“ setzen. Wenn keine positionierten Vorgängerelemente vorhanden sind, erfolgt die Positionierung relativ zum anfänglichen enthaltenden Block des Dokuments. Durch die absolute Positionierung bricht das Element aus dem Dokumentfluss aus und nimmt nicht mehr seinen ursprünglichen Platz ein. Sie können die Eigenschaften „top“, „bottom“, „left“ und „right“ verwenden, um den Versatz eines Elements relativ zu seinen Vorgängerelementen festzulegen.

3. Feste Positionierung (fest)

Die feste Positionierung erfolgt relativ zum Ansichtsfenster des Browserfensters. Indem Sie das Positionsattribut des Elements auf „Fixed“ setzen, kann das Element an einer bestimmten Position auf der Seite fixiert werden und ändert sich beim Scrollen der Seite nicht. Eine feste Positionierung führt dazu, dass das Element aus dem Dokumentenfluss ausbricht und nicht mehr seinen ursprünglichen Platz einnimmt. Sie können die Eigenschaften „oben“, „unten“, „links“ und „rechts“ verwenden, um den Versatz eines Elements relativ zum Ansichtsfenster festzulegen.

4. Sticky-Positionierung (Sticky)

Sticky-Positionierung ist ein Hybridmodus im Vergleich zur normalen Flusspositionierung und festen Positionierung. Sie können ein Element relativ zu seinem übergeordneten Element oder dem Ansichtsfenster positionieren, indem Sie seine Positionseigenschaft auf „sticky“ setzen. Die Sticky-Positionierung wird beim Scrollen zu einer bestimmten Position zu einer festen Positionierung und bleibt an der angegebenen Position auf der Seite. Sie können die Eigenschaften „oben“, „unten“, „links“ und „rechts“ verwenden, um den Versatz eines Elements relativ zu seinem übergeordneten Element oder dem Ansichtsfenster festzulegen.

Es ist zu beachten, dass relativ positionierte Elemente immer noch den ursprünglichen Platz einnehmen und das Layout anderer Elemente nicht beeinflussen. Absolut positionierte, fest positionierte und klebrig positionierte Elemente befinden sich jedoch außerhalb des Dokumentflusses und können das Layout anderer Elemente beeinflussen. Wenn Sie diese relativen Positionierungsmuster verwenden, müssen Sie die relative Position und Stapelreihenfolge der Elemente sorgfältig berücksichtigen, um das Gesamtlayout und die Benutzererfahrung der Seite sicherzustellen.

Zusammenfassend umfassen die relativen Positionierungsmodi von Elementen relative Positionierung, absolute Positionierung, feste Positionierung und klebrige Positionierung. Jeder Positionierungsmodus hat seine eigenen Eigenschaften und Verwendungszwecke. Sie können die geeignete Positionierungsmethode entsprechend den spezifischen Designanforderungen und Layoutanforderungen auswählen. Durch die flexible Verwendung dieser relativen Positionierungsmodi können verschiedene einzigartige Layouteffekte und interaktive Effekte erzielt werden, wodurch die Lesbarkeit und Bedienbarkeit von Webseiten verbessert wird.

Das obige ist der detaillierte Inhalt vonWas sind die relativen Positionierungsmodi von Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!