Positionspositionierung verstehen

In HTML gibt es zwei Möglichkeiten, das Layout zu ändern: eine ist float und die andere ist position Positionierung, heute erkläre ich, was PositionPositionierung ist.

Position ist ein sehr wichtiges Attribut in CSS. Über das Positionsattribut können wir ein Element relativ zu seiner normalen Position, seinem übergeordneten Element oder seinem Browserfenster versetzen.

Wir nennen das Positionsattribut. Es gibt 4 verschiedene Arten der Positionierung. Diese Typen beeinflussen die Art und Weise, wie Elemente generiert werden.

Position hat 4 Attributwerte: 1.static, 2.relative , 3.absolut, 4.fest. diese Attribute.

Statisch: ist die Standardpositionierung. Ohne die Position zu ändern, werden die Webseiten gemäß den normalen Dokumentenflussregeln angeordnet.

Relativ: Es handelt sich um eine relative Positionierung. Die Elemente werden entsprechend dem normalen Dokumentenfluss geordnet. Aber Sie können links, oben, unten, richtigetcCSS Regeln zum Ändern der Position des Elements. Lassen Sie die Webseite schöner aussehen.

Absolut

: Es handelt sich um eine absolute Positionierung: Das Element wird vom Dokumentenfluss getrennt. Das Element kann durch Folgendes weitergeleitet werden: oben, links, rechts, unten und andere CSS Regeln zum Ändern der Position des Elements. Lassen Sie Ihre Webseite schön aussehen.

Fest

: Es handelt sich um eine feste Positionierung: Das Element wird vom normalen Dokumentfluss getrennt und das Element wird an einer festen Position im Browser festgelegt und scrollt nicht mit dem Element. Elemente können übergeben werden: oben, links, rechts, untenetccss Regeln ändern die Position von Elementen.

Absolut

: Es wird eine absolute Positionierung relativ zum übergeordneten Element der nächstgelegenen Ebenenpositionierung erstellt, das kein -Element ist Nachdem die Einstellungen absolut geworden sind, werden sie vom Dokumentenfluss getrennt und belegen nicht den ursprünglichen Platz. Die nachfolgenden Elemente ersetzen das . relativ wird ins Chinesische als relative Positionierung übersetzt. Nach dem Festlegen dieses Attributs wird das Element entsprechend oben, links, unten und rechts versetzt. Der entscheidende Punkt ist, dass sein ursprünglicher Abstand erhalten bleibt .

Fixed

(alter IE

wird nicht unterstützt) generiert absolut (fest) positionierte Elemente, normalerweise relativ zum Browserfenster positioniert. und relative sind Elemente, die eine relative Positionierung relativ zur Positionierung in normalen Positionen erzeugen.

StatischDieser Attributwert ist die Standardpositionierung aller Elemente. Unter normalen Umständen müssen wir ihn nicht speziell deklarieren, aber manchmal möchten wir die Vererbung des Elements nicht sehen Das Attribut wirkt sich auf sich selbst aus, sodass Sie die Vererbung mit position:static abbrechen können, wodurch der Standardwert der Elementpositionierung wiederhergestellt wird.

Erben: Attribute erben. gibt an, dass der Wert des Positionsattributs vom übergeordneten Element geerbt werden soll.

! Hinweis: Viele Webseiten sind zentriert. Wenn also Elemente absolut positioniert sind, kommt es zu Abweichungen bei der Anzeige bei unterschiedlichen Auflösungen. In diesem Fall können wir dies mit einer Methode ähnlich der folgenden beheben:

　

　

　

Das Obige ist meine Erklärung des Positionsattributs des CSS-Attributs in HTML. Die Positionsfunktion in CSS ist sehr leistungsfähig und auch ein sehr praktisches Positionierungsattribut. Ich glaube, dass die Positionspositionierung ein sehr häufig verwendetes Attribut im Webdesign ist. Ich hoffe, dass meine Erklärungen Ihnen helfen können.