Heim Web-Frontend HTML-Tutorial Warum muss das übergeordnete Element die Position festlegen?

Warum muss das übergeordnete Element die Position festlegen?

Oct 07, 2023 am 11:52 AM
position

Das übergeordnete Element legt die Position fest, um die Positionierung und das Layout seiner untergeordneten Elemente zu steuern. Unterschiedliche Werte haben unterschiedliche Verwendungszwecke: 1. statisch, wodurch Elemente gemäß dem normalen Dokumentfluss angeordnet werden können und nicht von anderen Positionierungsattributen beeinflusst werden. 2. relativ, wodurch ein relativ positionierter Container zum Umschließen untergeordneter Elemente und zur Steuerung erstellt wird 3. Absolut: Erstellt einen absolut positionierten Container, der zur Steuerung der genauen Positionierung untergeordneter Elemente verwendet wird. 4. Fest: Erstellt einen fest positionierten Container, der zum Erstellen eines festen Elements auf der Seite verwendet wird.

Warum muss das übergeordnete Element die Position festlegen?

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

Der Zweck des Festlegens des Positionsattributs eines übergeordneten Elements besteht darin, die Positionierung und das Layout seiner untergeordneten Elemente zu steuern. Das Positionsattribut kann verwendet werden, um die Positionierungsmethode von Elementen zu ändern. Zu den allgemeinen Werten gehören statische, relative, absolute und feste Werte.

1. statisch:

statisch ist der Standardwert des Positionsattributs. Die Elemente werden entsprechend dem normalen Dokumentfluss angeordnet und werden nicht von anderen Positionierungsattributen beeinflusst. Wenn das übergeordnete Element das Positionsattribut nicht festlegt, erfolgt auch die Positionierung der untergeordneten Elemente entsprechend dem normalen Dokumentfluss, d. h. die untergeordneten Elemente werden entsprechend ihrer Reihenfolge in HTML angeordnet.

2. relativ:

Wenn das übergeordnete Element das Positionsattribut auf relativ setzt, kann die Positionierung des untergeordneten Elements relativ zum übergeordneten Element verschoben werden, indem die Attribute oben, rechts, unten und links festgelegt werden. Diese Positionierungsmethode ändert nicht die Position des untergeordneten Elements im Dokumentenfluss, sondern versetzt sie relativ zum übergeordneten Element.

Ein häufiges Anwendungsszenario zum Festlegen von position:relative für ein übergeordnetes Element besteht darin, einen relativ positionierten Container zu erstellen, um untergeordnete Elemente einzuschließen und deren Layout zu steuern. Durch Festlegen der Attribute „oben“, „rechts“, „unten“ und „links“ des untergeordneten Elements können die Positionierung und das Layout des untergeordneten Elements relativ zum übergeordneten Element erreicht werden.

3. absolut:

Wenn das übergeordnete Element das Positionsattribut auf „absolut“ setzt, kann die Positionierung des untergeordneten Elements relativ zu seinem nächstgelegenen positionierten Vorgängerelement verschoben werden. Wenn keine positionierten Vorgängerelemente vorhanden sind, wird die Positionierung der untergeordneten Elemente relativ zum ursprünglichen enthaltenden Block des Dokuments versetzt.

Ein häufiges Anwendungsszenario zum Festlegen von position:absolute für ein übergeordnetes Element besteht darin, einen absolut positionierten Container zu erstellen, um die genaue Positionierung untergeordneter Elemente zu steuern. Durch Festlegen der Attribute „oben“, „rechts“, „unten“ und „links“ des untergeordneten Elements können Sie eine präzise Positionierung des untergeordneten Elements relativ zum übergeordneten Element oder zum anfänglichen enthaltenden Block des Dokuments erreichen.

4. Fest:

Wenn das übergeordnete Element das Positionsattribut auf „fest“ setzt, wird die Positionierung des untergeordneten Elements relativ zum Browserfenster verschoben. Diese Positionierungsmethode ändert sich beim Scrollen nicht und die untergeordneten Elemente bleiben immer an einer festen Position.

Ein häufiges Anwendungsszenario zum Festlegen von position:fixed für ein übergeordnetes Element besteht darin, einen Container mit fester Position zu erstellen, um ein festes Element auf der Seite zu erstellen, z. B. eine Navigationsleiste oder ein schwebendes Feld.

Zusammenfassung:

Der Zweck des Festlegens des Positionsattributs eines übergeordneten Elements besteht darin, die Positionierung und das Layout seiner untergeordneten Elemente zu steuern. Sie können ändern, wie ein untergeordnetes Element relativ zu seinem übergeordneten Element oder Dokument positioniert wird, indem Sie das Positionsattribut auf „relativ“, „absolut“ oder „fest“ festlegen. Mit dieser Positionierungsmethode kann eine relative Positionierung, eine absolute Positionierung oder eine feste Positionierung von Unterelementen erreicht werden, wodurch ein flexiblerer Layouteffekt erzielt wird.

Das obige ist der detaillierte Inhalt vonWarum muss das übergeordnete Element die Position festlegen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
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

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Flexible Einsatzfähigkeiten des Positionsattributs in H5 Flexible Einsatzfähigkeiten des Positionsattributs in H5 Dec 27, 2023 pm 01:05 PM

Flexible Einsatzfähigkeiten des Positionsattributs in H5

So fügen Sie div unten in HTML ein So fügen Sie div unten in HTML ein Mar 02, 2021 pm 05:44 PM

So fügen Sie div unten in HTML ein

Tipps zur Optimierung von CSS-Layouteigenschaften: Position Sticky und Flexbox Tipps zur Optimierung von CSS-Layouteigenschaften: Position Sticky und Flexbox Oct 20, 2023 pm 03:15 PM

Tipps zur Optimierung von CSS-Layouteigenschaften: Position Sticky und Flexbox

Welche Eigenschaften hat die Position? Welche Eigenschaften hat die Position? Oct 10, 2023 am 11:18 AM

Welche Eigenschaften hat die Position?

So verwenden Sie die Position in h5 So verwenden Sie die Position in h5 Dec 26, 2023 pm 01:39 PM

So verwenden Sie die Position in h5

Interpretation der CSS-Kaskadierungseigenschaften: Z-Index und Position Interpretation der CSS-Kaskadierungseigenschaften: Z-Index und Position Oct 20, 2023 pm 07:19 PM

Interpretation der CSS-Kaskadierungseigenschaften: Z-Index und Position

HTML-Layout-Tipps: So verwenden Sie das Positionsattribut für die Steuerung schwebender Elemente HTML-Layout-Tipps: So verwenden Sie das Positionsattribut für die Steuerung schwebender Elemente Oct 21, 2023 am 09:22 AM

HTML-Layout-Tipps: So verwenden Sie das Positionsattribut für die Steuerung schwebender Elemente

Verwendung und Wirkungsanzeige des Sticky-Positionierungsattributs in CSS Verwendung und Wirkungsanzeige des Sticky-Positionierungsattributs in CSS Dec 27, 2023 pm 12:08 PM

Verwendung und Wirkungsanzeige des Sticky-Positionierungsattributs in CSS

See all articles