Es gibt verschiedene Möglichkeiten, HTML zu positionieren

HTML-Positionierung umfasst: 1. Standardpositionierung, relativ 3. Absolute Positionierung, relativ; 5. Feste Positionierung, fest; .

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

1. statisch (Standard)

Wenn Sie keine Positionierungsmethode für ein Element angeben (z. B. p), ist die Standardeinstellung statisch, was bedeutet, dass das Element entsprechend der Flusspositionierung an einer geeigneten Position platziert wird des Dokuments. Daher kann die Verwendung der Flusspositionierung bei unterschiedlichen Auflösungen gut angepasst werden und relativ gute Layouteffekte erzielt werden.

Im Allgemeinen müssen wir nicht angeben, dass die Positionierungsmethode des aktuellen Elements statisch ist, da dies die Standardpositionierungsmethode ist. Es sei denn, Sie möchten das vom übergeordneten Element geerbte Positionierungssystem überschreiben.

2. Relativ (relative Positionierung)

Wenn ich möchte, dass ein Element aufgrund der Statik einige Anpassungen (Verschiebungen) an seiner ursprünglichen Position vornimmt, können wir die Positionierung des Elements auf relativ setzen und die relative Verschiebung angeben (mit oben, unten, links, rechts).

Zu beachten ist, dass sich das relativ positionierte Element immer noch im Dokumentenfluss befindet und immer noch den Positionsraum einnimmt, den es ursprünglich einnahm – obwohl es sich nicht mehr an seiner ursprünglichen Position befindet.

3. Absolut (absolute Positionierung)

Wenn Sie ein Element an einer bestimmten Position in einem Dokument platzieren möchten, können Sie es mit „Absolut“ positionieren, die Position des Elements auf „Absolut“ festlegen und „oben“ und „unten“ verwenden ,links,rechts zur Positionierung.

Absolute Positionierung führt dazu, dass das Element aus dem Dokumentenfluss entfernt wird, was dazu führt, dass der ursprünglich vom Element eingenommene Platz durch andere Elemente gefüllt wird.

4. Mischen Sie relative und absolute (relative Positionierung und absolute Positionierung mischen)

Wenn „relativ“ auf ein übergeordnetes Element und „absolut“ auf eines seiner untergeordneten Elemente festgelegt ist, wie zum Beispiel:

<div id="parent" style="position:relative">
    <div id="child" style="position:absolute">
    </div>
</div>

Das untergeordnete Element ist absolut positioniert Die Referenz ist das übergeordnete Element.

Mit gemischter Positionierung können wir CSS ähnlich dem folgenden verwenden, um eine zweispaltige Positionierung zu erreichen (statisch zählt nicht)“, was soll ich dann tun, wenn die Referenz für die Positionierung eines Elements immer das gesamte Dokument (Ansichtsfenster) sein soll?

Die Antwort ist die Verwendung einer festen Positionierung. Das Referenzobjekt der festen Positionierung ist immer das aktuelle Dokument. Mit der festen Positionierung können wir ein p ganz einfach oben links, oben rechts usw. im Browserdokument positionieren. Wenn Sie beispielsweise eine Informationsaufforderung p hinzufügen und das p in der oberen rechten Ecke fixieren möchten, können Sie das folgende CSS verwenden

#div-parent {
 position:relative;
}
#div-child-right {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-child-left {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

6, float (floating)

Für Floating müssen Sie Folgendes wissen :

*Floating entfernt ein Element aus dem Dokumentenfluss und sein Platz wird durch andere Elemente gefüllt. *Der Floating-Parameter ist das übergeordnete Element und schwimmt im Container des übergeordneten Elements.

*Um die Auswirkungen des Floatings auf die Elemente nach dem Floating-Element zu beseitigen, fügen wir nach dem Floating-Element ein p hinzu und setzen den Clear dieses p auf beide.

*Wenn beide Elemente auf Float eingestellt sind, überlappen sich die beiden Elemente nicht. Das erste Element nimmt einen bestimmten Raum ein und das zweite Element folgt dicht dahinter. Wenn Sie nicht möchten, dass das zweite Element darauf folgt, können Sie „clear“ für das zweite schwebende Element verwenden.

7、Referenz

Wert

BeschreibungEmpfohlenes Lernen:

statisch	Elemente werden in der Reihenfolge gerendert, wie sie im Dokumentfluss erscheinen. Dies ist die Standardeinstellung.
absolut	Das Element ist relativ zu seinem ersten positionierten (nicht statischen) Vorgängerelement positioniert
fest	Das Element ist relativ zum Browserfenster positioniert
relativ	" fügt 20 Pixel zur LINKEN Position des Elements hinzu
erben	Der Wert der Positionseigenschaft wird vom übergeordneten Element geerbt
	HTML-Video-Tutorial

Das obige ist der detaillierte Inhalt vonEs gibt verschiedene Möglichkeiten, HTML zu positionieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!