So positionieren Sie CSS

Css-Positionierungsmethode: Verwenden Sie zuerst das Positionsattribut, um den Positionierungstyp des Elements anzugeben (statische Positionierung, absolute Positionierung, relative Positionierung oder feste Positionierung). Verwenden Sie dann die Attribute links, oben, rechts und unten, um die Position des Elements anzupassen Element.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Was ist Positionierung:

Das Positionsattribut in CSS, Position, hat vier Werte: absolut/relativ/fest/statisch (absolut/relativ/fest/statisch (Standard)) Sie können verschiedene Werte festlegen über das Positionierungsattribut Verwenden Sie für ein normales Layout TLBR(oben, links, unten, rechts), um die Elementposition anzupassen.

Beschreibung jedes Attributwerts:

• statisch (statisch) hat keine besonderen Einstellungen, bricht nicht aus dem Dokumentenfluss, folgt den grundlegenden Positionierungsvorschriften und kann nicht über den Z-Index hierarchisch sein. Im normalen Ablauf sind die Standardattribute jedes Elements.
• relative (relative Positionierung) Objekte können nicht gestapelt werden, nicht aus dem Dokumentenfluss ausbrechen und werden in Bezug auf ihre eigene statische Position oben, unten, links und rechts positioniert.
• absolut (absolute Positionierung) Aus dem Dokumentenfluss heraus, positioniert durch oben, unten, links, rechts. Wählen Sie das nächstgelegene übergeordnete Objekt mit den meisten Positionierungseinstellungen für die absolute Positionierung aus. Wenn das übergeordnete Objekt des Objekts keine Positionierungsattribute festlegt, wird das absolute Element am Ursprung der Körperkoordinaten positioniert.
• fest (feste Positionierung) Außerhalb des Dokumentenflusses, Das feste Referenzobjekt ist hier das visuelle Fenster und nicht der Körper oder das übergeordnete Element. Feste Elemente werden beim Scrollen des Fensters nicht gescrollt. Gehört zu einer Teilmenge von absolut.

Die spezifische Rolle jedes Attributwerts:

A.static: (statisch, Standardattribut) wird normalerweise nicht verwendet, aber es gibt einige Szenarien, in denen Sie den Positionswert ändern möchten. Wird beim Ändern verwendet von anderen Werten zum Standardwert.

B.relative: (relative Positionierung) Ein Element wird auf position:relativ eingestellt, da es nicht aus dem Textfluss ausbricht. Wenn TLBR (oben, links, unten, rechts) nicht festgelegt ist, wird dies der Fall sein nicht geändert werden und hat keinen Einfluss auf das aktuelle Layout, was bedeutet, dass nichts passiert. Wenn TLBR gesetzt ist, kann das Element in die angegebene Richtung verschoben werden, aber seine ursprüngliche Position ist weiterhin in der Abbildung dargestellt:

Abbildung 1: Position ist für Kind-1 festgelegt: relativ

Abbildung 2: Passen Sie dann die Position von Kind-1 an. Oben: 20 Pixel. Links: 20 Pixel besetzt und kann TLBR so einstellen, dass es sich nach Belieben verschiebt.

Besonderer Hinweis: Nach dem Festlegen von „absolut“ für ein Element legt dessen übergeordnetes Element die Position nicht fest: absolut/relativ/fest und es verwendet „body“ als übergeordnetes Element.

Picture 1:

Picture 2:

Picture 3:

d.fixed Hier gibt es keine Bilder. Am auffälligsten sind die kleinen Anzeigen auf Webseiten, die Ihnen immer auf der rechten oder linken Seite folgen.

Positionierungslayoutfähigkeiten: Position: relativ und Position: absolut, kombinierte Verwendung:

Wie oben erwähnt: Wenn „Absolut“ für ein Element festgelegt ist und das übergeordnete Element „Position: Relativ“ nicht festlegt, wird der Körper verwendet als übergeordnete Klasse. In diesem Fall wird es für uns schwierig sein, das Element an unserer Zielposition zu positionieren, und es wird mühsam sein, die Pixel zu messen. Bildbeschreibung:

Bild 1: Ausgangszustand

Bild 2: Position festlegen: absolut für Box-chd-chd und oben: 0, links: 0. Sie können sehen, dass der Körper als übergeordnetes Element verwendet wird und endet mit der letzten Die obere linke Ecke wird als Ausgangspunkt verwendet

Bild 3: Position festlegen: relativ für Box Sie können sehen, dass box-chd-chd zu diesem Zeitpunkt box als übergeordnetes Element verwendet

Bild 4: Position für box-chd festlegen: relativ, Sie können sehen, dass box-chd-chd box-chd als übergeordnetes Element hat

Es ist ersichtlich, dass, wenn das untergeordnete Element die Position „absolut“ und sein übergeordnetes Element die Position „relativ“ festlegt, das untergeordnete Element von der oberen linken Ecke des übergeordneten Elements als Ausgangspunkt ausgeht und dem „Näherungsprinzip“ folgt Die Kinder suchen nach ihren Eltern. Wenn sie den ersten Elternteil mit relativer Menge finden, beginnen sie in der oberen linken Ecke. Die Kombination aus Relativ und Absolut erleichtert die Positionierung und das Layout, und der zum Verschieben erforderliche Abstand ist nicht erforderlich, um Pixel auf der gesamten Seite zu messen. Dies ist auch praktisch für die Verwaltung und hat eine klare Übersicht Struktur.

(Teilen von Lernvideos:

CSS-Video-Tutorial

)

Das obige ist der detaillierte Inhalt vonSo positionieren Sie CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!