Heim >Web-Frontend >Front-End-Fragen und Antworten >Welche Arten der HTML5-Positionierung gibt es?

Welche Arten der HTML5-Positionierung gibt es?

青灯夜游Original: 2022-01-11 11:18:245453Durchsuche

Es gibt 5 Arten der Positionierung in HTML5: 1. Absolute Positionierung (relativ); 3. Feste Positionierung (fest); 5. Statische Positionierung (statisch); .

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.

Mehrere Positionierungsmethoden in HTML5

Position legt die Position eines Elements auf Blockebene relativ zu seinem übergeordneten Block fest und die Position, die es relativ zu sich selbst haben sollte

1. Absolute Positionierung (absolut)

Funktionen:

Wenn kein übergeordnetes Element vorhanden ist, ist das Referenzobjekt das gesamte Dokument.
Standardmäßig ist das Referenzobjekt das positionierte übergeordnete Element.
Das Hinzufügen eines absolut positionierten Elements löst das Ganze aus Layoutfluss und Zerstörung des Layoutraums

Ziehen Sie das absolut positionierte Element aus dem Dokumentfluss und verwenden Sie links, rechts, oben, unten und andere Attribute, um eine absolute Positionierung relativ zu seinem nächstgelegenen übergeordneten Element mit den meisten Positionierungseinstellungen durchzuführen Das übergeordnete Element des Elements funktioniert nicht. Beim Festlegen des Positionierungsattributs basiert die Positionierung auf der oberen linken Ecke des Körperelements als Referenz. Absolut positionierte Elemente können gestapelt werden, und die Stapelreihenfolge kann über das Z-Index-Attribut gesteuert werden. Der Z-Index-Wert ist eine ganze Zahl ohne Einheit, wobei der größere Wert oben liegt, und kann negative Werte haben.

Absolute Positionierungsmethode: Wenn sein übergeordnetes Element eine andere Position als statisch festlegt, z. B. Position: relativ oder Position: absolut und Position: fest, wird es relativ zu seinem übergeordneten Element positioniert und die Position wird links übergeben Die Attribute „oben“, „rechts“ und „unten“ legen fest, dass, wenn das übergeordnete Element keinen Positionierungssatz hat, es davon abhängt, ob das übergeordnete Element des übergeordneten Elements über einen Positionierungssatz verfügt. Wenn dies immer noch nicht der Fall ist, fahren Sie mit den übergeordneten Vorfahrenelementen fort usw. Kurz gesagt: Die Positionierung erfolgt relativ zum ersten Vorfahrenelement mit einer anderen Positionierung als dem statischen Positionierungssatz. Wenn nicht alle Vorfahrenelemente eine der oben genannten drei Positionierungen haben, wird es relativ zum Dokumentkörper positioniert (). Nicht relativ zum Browserfenster, die Positionierung relativ zum Fenster ist fest).

<head>
	<style type="text/css">
		.box {
			background: red;
			width: 100px;
			height: 100px;
			float: left;
			margin: 5px;
		}
		.two {
			position: absolute;
			top: 50px;
			left: 50px;
		}
	</style>
</head>
<body>
	<div class="box" >One</div>
	<div class="box  two" >Two</div>
	<div class="box" >Three</div>
	<div class="box">Four</div>
</body>

Positionieren Sie das Div mit class="two" 50 Pixel von oben und links vom

. Dadurch wird das Layout anderer Elemente geändert und an der ursprünglichen Position dieses Elements bleibt kein Leerraum zurück.

Welche Arten der HTML5-Positionierung gibt es?

2. zerstört den Layoutfluss nicht

Relativ positionierte Elemente können nicht gestapelt werden. Sie werden im normalen Dokumentenfluss basierend auf den Attributen links, rechts, oben, unten und anderen versetzt. Sie können auch das hierarchische Z-Index-Design verwenden.

<head>
	<style type="text/css">
		.box {
			background: red;
			width: 100px;
			height: 100px;
			float: left;
			margin: 5px;
		}
		.two {
			position: relative;
			top: 50px;
			left: 50px;
		}
	</style>
</head>
<body>
	<div class="box" >One</div>
	<div class="box  two" >Two</div>
	<div class="box" >Three</div>
	<div class="box">Four</div>
</body>

Positionieren Sie das Div mit class="two" 50 Pixel von oben und links von seiner ursprünglichen Position. Das Layout anderer Elemente wird dadurch nicht geändert, es bleibt jedoch ein Leerraum an der ursprünglichen Position dieses Elements.
3. Feste Positionierung (fest)
Eigenschaften:

Das Referenzobjekt ist das Browserfenster

Die feste Positionierung ähnelt der absoluten Positionierung, wird jedoch relativ zum Browserfenster positioniert , und Scrollt nicht mit der Bildlaufleiste. Welche Arten der HTML5-Positionierung gibt es?

Eine der häufigsten Anwendungen der festen Positionierung besteht darin, eine feste Kopfzeile, eine feste Fußzeile oder eine feste Seitenleiste auf der Seite zu erstellen, ohne einen Rand, einen Rand oder einen Abstand zu verwenden.

So zentrieren Sie ein Element links, rechts, oben und unten im Browserfenster:

Methode 1:

position:fixed
left:50%;
top:50%;
margin-left: -盒子宽度的一半
margin-top:-盒子高度的一半

position:fixed;
left:0;
right:0
top:0
bottom:0
margin:auto

Funktionen:

Es handelt sich um eine Kombination aus relativ und fest.

Wenn die Seite die Bildlaufleiste nicht auslöst, ist der Ausführungseffekt position: relativ, andernfalls ist es position: fixiert.

Die Anwendung ist : Seitenobergrenze

<!DOCTYPE html>
<html>
	<meta charset="utf8">
	<head>
		<style>
			section:first-child {
				height: 200px;
				background-color: lightgray;
			}

			section:nth-child(2) {
				height: 100px;
				background-color: orange;
				position: sticky;
				position: -webkit-sticky;
				top: 50px;
			}

			section:nth-child(3) {
				height: 300px;
				background-color: lightgray;
			}

			section:nth-child(4) {
				height: 100px;
				background-color: orange;
				position: sticky;
				position: -webkit-sticky;
				top: 150px;
			}

			section:last-child {
				height: 500px;
				background-color: darkgray;
			}
		</style>
	</head>
	<body>
		<section>SECTION-1</section>
		<section>SECTION-2</section>
		<section>SECTION-3</section>
		<section>SECTION-4</section>
		<section>SECTION-5</section>
	</body>
</html>

5. Statische Positionierung (statische Standardeinstellung)
Wenn Sie keine Positionierungsmethode für ein Element (z. B. ein Div) angeben, ist die Standardeinstellung statisch, d. h. entsprechend Entsprechend der Fließpositionierung des Dokuments wird das Element an einer geeigneten Stelle platziert. Daher kann die Verwendung der Flusspositionierung bei unterschiedlichen Auflösungen gut angepasst werden und relativ gute Layouteffekte erzielt werden.
Die Attribute „Left“ und „Top“ haben keinen Einfluss auf Static, das nach Rand positioniert wird.

HTML-Video-Tutorial

“ Welche Arten der HTML5-Positionierung gibt es?

Das obige ist der detaillierte Inhalt vonWelche Arten der HTML5-Positionierung gibt es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 html Static 继承 class position margin padding border

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was bedeutet das rb-Tag in HTML5?Nächster Artikel：Was bedeutet das rb-Tag in HTML5?

In Verbindung stehende Artikel

Mehr sehen