Positionieren von Elementen auf einer Webseite mit der CSS-Positionseigenschaft

April 26, 2024

Vor dem Kaskadieren von Stylesheets war die Kontrolle über die Position von Objekten auf Ihrer Webseite eingeschränkt. Sie könnten die HTML-Tabelle verwenden, um die Positionierung leicht zu steuern, aber dies war nicht sehr genau. Mit CSS können Sie jetzt genau steuern, wie jedes Element auf Ihrer Webseite platziert wird.

Bevor Sie die CSS-Positionseigenschaft zum Positionieren von Elementen auf Ihrer Webseite verwenden können, müssen wir die Terminologie für die Kommunikation mit dem Webbrowser erläutern. CSS berücksichtigt nicht nur die Breite und Höhe Ihrer Webseite, sondern auch die Abmessungen des Webbrowsers.

Browserbreite und -höhe
Zunächst könnte man meinen, dies beziehe sich auf das geöffnete Browserfenster. Aber es bezieht sich wirklich auf den gesamten Browser einschließlich der Steuerelemente und Schaltflächen.
Live Breite und Höhe
Dies ist der Begriff für den Anzeigebereich des Browsers. Die Steuerelemente sind nicht enthalten.
Dokumentbreite und -höhe
Dies ist die gesamte Breite und Höhe Ihrer Webseite. Wenn diese Abmessungen größer als die Live-Breite und -Höhe sind, zeigt der Browser nach Bedarf Bildlaufleisten an.

Nachdem Sie die Begriffe für die Grenzen kennen, an denen Sie die Teile Ihrer Webseite mithilfe von CSS positionieren können, werfen wir einen Blick auf die vier Positionswerte.

Statisch
Dies ist die Standardeinstellung. Sofern Sie für ein Element nichts anderes angeben, verwendet der Browser die statische Positionierung. So wie es sich anhört, können Sie mit statischer Positionierung keine Elemente auf der Webseite neu positionieren. Wie bestimmt der Browser, wo jedes Objekt auf Ihrer Webseite platziert werden soll? Es positioniert jedes Element in der Reihenfolge, in der es in Ihrem HTML-Code vorkommt. Wenn Sie ein Logo-Bild, eine Anrede und dann den Copyright-Hinweis in Ihrem HTML-Code haben, platziert der Browser diese auf der Webseite in dieser Reihenfolge. Sie können die Anrede nicht über das Logo-Bild verschieben.
Relativ
Die relative Positionierung funktioniert genauso wie die statische, da die Reihenfolge der Elemente im HTML-Code den Fluss der Elemente auf der Seite steuert. Sie können jedoch die relative Positionierung verwenden, um die Position eines Elements im Verhältnis zu den anderen Elementen auf der Webseite zu steuern.
Absolut
Wenn Sie die absolute Positionierung mit einem Element verwenden, wird dieses Element vom Rest der Webseite unabhängig. Da die Platzierung nicht mehr durch die Reihenfolge des HTML-Codes bestimmt wird, müssen Sie X- und Y-Koordinaten verwenden, um das Element zu positionieren.
Fest
Dies funktioniert genauso wie die absolute Positionierung. Das Element mit fester Positionierung wird jedoch nicht mit der Webseite gescrollt. Dies ist eine nette Funktion für ein Logo oder Menü, das sichtbar bleiben soll, wenn die Seite nach oben rollt.

Video-Anleitungen: CSS 3 Tutorial #9 - Position (April 2024).

Positionieren von Elementen auf einer Webseite Mit der CSS-Positionseigenschaft, HTML, CSS, CSS-Positionseigenschaft, statische Positionierung, relative Positionierung, absolute Positionierung, feste Positionierung, Positionieren von Elementen auf einer Webseite, CSS zum Positionieren von Elementen auf einer Webseite

Vorherige Artikel

Nächster Artikel

In Verbindung Stehende Artikel

Computers

Javascript-Grundlagen

April 2024

Javascript ist eine großartige Möglichkeit, Ihrer Website Interaktivität zu verleihen. Allein mit HTML sind Ihre Seiten vollständig statisch. Wenn Sie jedoch einige Javascript-Schnipsel einfügen,...

Computers

Wix Website von Grund auf neu - Das Header-Menü

April 2024

In diesem Tutorial werden wir weiterhin an unserer Wix-Website arbeiten, die wir mit einer leeren Vorlage gestartet haben. Wir werden ein Hauptmenü in der Kopfzeile hinzufügen.Unsere erste Aufgabe...