Heim Web-Frontend CSS-Tutorial Wie werden die Referenzparameter der absoluten Positionierung bestimmt?

Wie werden die Referenzparameter der absoluten Positionierung bestimmt?

Jan 23, 2024 am 08:40 AM
absolute Positionierung Referenzparameter Bestimmungsmethode

Wie werden die Referenzparameter der absoluten Positionierung bestimmt?

Wie ermittelt man die Parameter der absoluten Positionierungsreferenz?

In der Webentwicklung ist die absolute Positionierung eine häufig verwendete Layouttechnik, mit der Elemente auf der Seite genau positioniert werden können. Bei Verwendung der absoluten Positionierung müssen wir jedoch einen Satz Referenzparameter bereitstellen, um die spezifische Position des Elements anzugeben. In diesem Artikel wird erläutert, wie die Parameter einer absoluten Positionierungsreferenz ermittelt werden, und es werden einige Codebeispiele als Referenz bereitgestellt.

1. Bestimmen Sie die relative Positionierung des übergeordneten Elements

Bei Verwendung der absoluten Positionierung müssen Sie zunächst die Positionierungsmethode des übergeordneten Elements bestimmen. Wenn das übergeordnete Element keine Positionierungsmethode angibt, wird standardmäßig die statische Positionierung verwendet. In diesem Fall bezieht sich die absolute Positionierung auf den gesamten Dokumentfluss, der relativ zum Browserfenster ist. Wenn Sie eine relative Positionierung zum übergeordneten Element benötigen, müssen Sie das übergeordnete Element auf relative Positionierung einstellen.

Der Beispielcode lautet wie folgt:

<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        top: 20px;
        left: 20px;
    }
</style>

<div class="parent">
    <div class="child">
        绝对定位元素
    </div>
</div>
Nach dem Login kopieren
Nach dem Login kopieren

Im obigen Code legt das übergeordnete Element die relative Positionierung fest, das untergeordnete Element legt die absolute Positionierung fest und gibt einen Versatz von 20 Pixeln von oben und links an.

2. Bestimmen Sie die Versätze der oberen, unteren, linken und rechten Seite.

Nachdem Sie die Positionierungsmethode des übergeordneten Elements bestimmt haben, können Sie die Position des Elements relativ zum übergeordneten Element bestimmen. Zu den häufig verwendeten Positionierungsparametern gehören „oben“, „unten“, „links“ und „rechts“, die jeweils den Abstand zwischen dem Element und der oberen, unteren, linken und rechten Seite des übergeordneten Elements darstellen.

Der Beispielcode lautet wie folgt:

<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        top: 20px;
        left: 20px;
    }
</style>

<div class="parent">
    <div class="child">
        绝对定位元素
    </div>
</div>
Nach dem Login kopieren
Nach dem Login kopieren

Im obigen Code ist der Versatz von oben und links auf jeweils 20 Pixel eingestellt.

3. Bestimmen Sie die horizontale und vertikale Zentrierung

Zusätzlich zur Bestimmung des spezifischen Versatzes können Sie auch das Transformationsattribut verwenden, um eine Zentrierung zu erreichen. Für das Transformationsattribut stehen mehrere Werte zur Auswahl, unter denen TranslateX und TranslateY horizontale und vertikale Übersetzungseffekte erzielen können.

Der Beispielcode lautet wie folgt:

<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
</style>

<div class="parent">
    <div class="child">
        绝对定位元素
    </div>
</div>
Nach dem Login kopieren

Im obigen Code werden die oberen und linken Attribute verwendet, um die Anfangsposition des Elements auf den Mittelpunkt des übergeordneten Elements festzulegen, und dann wird der Zentrierungseffekt durch erreicht TranslateX und TranslateY des Transformationsattributs.

Durch die oben genannten Schritte können Sie die Parameter der absoluten Positionierungsreferenz bestimmen und eine präzise Positionierung von Elementen auf der Webseite erreichen. In der tatsächlichen Entwicklung können Sie Parameterwerte an spezifische Anforderungen anpassen und mit anderen Layouttechniken kombinieren, um komplexere Effekte zu erzielen. Ich hoffe, dieser Artikel kann Ihnen hilfreich sein!

Das obige ist der detaillierte Inhalt vonWie werden die Referenzparameter der absoluten Positionierung bestimmt?. 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 KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

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)

Unterbricht die Sticky-Positionierung den Dokumentenfluss? Unterbricht die Sticky-Positionierung den Dokumentenfluss? Feb 20, 2024 pm 05:24 PM

Unterbricht die Sticky-Positionierung den Dokumentenfluss? In der Webentwicklung ist das Layout ein sehr wichtiges Thema. Unter diesen ist die Positionierung eine der am häufigsten verwendeten Layouttechniken. In CSS gibt es drei gängige Positionierungsmethoden: statische Positionierung, relative Positionierung und absolute Positionierung. Zusätzlich zu diesen drei Positionierungsmethoden gibt es noch eine speziellere Positionierungsmethode, nämlich die Sticky-Positionierung. Unterbricht die Sticky-Positionierung also den Dokumentenfluss? Lassen Sie uns dies im Folgenden ausführlich besprechen und einige Codebeispiele bereitstellen, um das Verständnis zu erleichtern. Zuerst müssen wir verstehen, was Dokumentenfluss ist

So positionieren Sie Elemente in CSS So positionieren Sie Elemente in CSS Apr 26, 2024 am 10:24 AM

Es gibt vier Methoden zur Positionierung von CSS-Elementen: statische, relative, absolute und feste Positionierung. Die statische Positionierung ist die Standardeinstellung und das Element wird von den Positionierungsregeln nicht beeinflusst. Durch die relative Positionierung wird ein Element relativ zu sich selbst verschoben, ohne den Dokumentfluss zu beeinträchtigen. Bei der absoluten Positionierung wird ein Element aus dem Dokumentfluss entfernt und relativ zu seinen Vorgängerelementen positioniert. Durch die feste Positionierung wird ein Element relativ zum Ansichtsfenster positioniert, sodass es immer an derselben Position auf dem Bildschirm bleibt.

So platzieren Sie das Bild mit CSS in der Mitte So platzieren Sie das Bild mit CSS in der Mitte Apr 25, 2024 am 11:51 AM

Es gibt drei Hauptmethoden, um ein Bild in CSS zu zentrieren: mit display: block; und margin: 0 auto;. Verwenden Sie das Flexbox-Layout oder das Rasterlayout und stellen Sie „Align-Items“ oder „Justify-Content“ auf „Center“ ein. Verwenden Sie die absolute Positionierung, setzen Sie oben und links auf 50 % und wenden Sie transform an: translator(-50 %, -50 %);.

Bottom-Attributsyntax in CSS Bottom-Attributsyntax in CSS Feb 21, 2024 pm 03:30 PM

Syntax und Codebeispiele für das Bottom-Attribut in CSS In CSS wird das Bottom-Attribut verwendet, um den Abstand zwischen einem Element und dem Boden des Containers anzugeben. Es steuert die Position eines Elements relativ zum unteren Rand seines übergeordneten Elements. Die Syntax des unteren Attributs lautet wie folgt: element{bottom:value;} wobei element das Element darstellt, auf das der Stil angewendet werden soll, und value den festzulegenden unteren Wert darstellt. Der Wert kann ein bestimmter Längenwert sein, z. B. Pixel

Was ist Layout-Layout? Was ist Layout-Layout? Feb 24, 2024 pm 03:03 PM

Unter Layout versteht man eine im Webdesign verwendete Schriftsatzmethode, um Webseitenelemente nach bestimmten Regeln und Strukturen anzuordnen und anzuzeigen. Durch ein angemessenes Layout kann die Webseite schöner und übersichtlicher gestaltet werden und eine gute Benutzererfahrung erzielt werden. Bei der Front-End-Entwicklung stehen viele Layoutmethoden zur Auswahl, z. B. traditionelles Tabellenlayout, schwebendes Layout, Positionierungslayout usw. Mit der Förderung von HTML5 und CSS3 sind jedoch moderne responsive Layout-Technologien wie das Flexbox-Layout und das Grid-Layout entstanden

So zentrieren Sie die Box in HTML5 So zentrieren Sie die Box in HTML5 Apr 05, 2024 pm 12:27 PM

Um die Box in HTML5 zu zentrieren, gibt es die folgenden Methoden: horizontale Zentrierung: text-align: centermargin: autodisplay: flexy-content: center; ); Position: absolut; links: 50 %; transformieren (-50 %; -50 %);

So passen Sie die Position von Komponenten im Bootstrap an So passen Sie die Position von Komponenten im Bootstrap an Apr 05, 2024 am 03:00 AM

Bootstrap bietet verschiedene Möglichkeiten, die Position von Komponenten anzupassen: Offset-Klasse: Horizontal versetzte Komponenten. Hilfsklasse: Komponentenausrichtung anpassen. Rastersystem: Steuert die Anzahl der Spalten, die die Komponente im Raster einnimmt. Inline-Elemente: Erstellen Sie schwebende Layouts. Absolute Positionierung: Verschiebt eine Komponente aus ihrem regulären Fluss und positioniert sie an einer beliebigen Stelle auf der Seite.

So richten Sie Textfelder in HTML aus So richten Sie Textfelder in HTML aus Mar 27, 2024 pm 04:33 PM

Methoden zum Ausrichten von Textfeldern in HTML: 1. Textausrichtung; 2. Verwenden Sie die Ausrichtung des Rasterlayouts; 4. Verwenden Sie die Rand- oder Positionsausrichtung.

See all articles