1. Startseite
  2. »
  3. Allgemeine Themen & Trends
  4. »
  5. Platzieren von Webseitelementen: position absolute macht’s möglich!

Platzieren von Webseitelementen: position absolute macht’s möglich!

position-absolute

Platzieren von Webseitelementen: position absolute macht’s möglich!

Willst Du programmieren lernen, kommst Du an gewissen Eingabebefehlen und Shorthands nicht vorbei. Einer der Befehle im CSS ist der zur Positionierung eines Elementes – darunter fällt auch „postion absolute“. Was diese Eigenschaft ausmacht, was es bringt und wie Du es für Dich nutzen kannst, erfährst Du hier.

Was ist position absolute?

Der Eingabebefehl „position absolute“ gehört zu den Positionseigenschaften, die man im CSS spezifizieren kann. Davon gibt es insgesamt fünf, nämlich: static, relative, fixed, sticky – und eben absolute.

Was bewirkt die Eingabe dieses Befehls?

Rudimentär gesprochen ermöglicht die Eigenschaft „position absolute“ es Entwicklern und Webdesignern, Elemente an einer beliebigen Stelle auf einer Webseite zu platzieren.

Eine absolute Positionierung meint in diesem Zusammenhang, dass das Element später auf einer Webseite an exakt der Stelle angezeigt wird, an der es zuvor im Code positioniert und ausgerichtet wurde.

Es ist in seiner Position unabhängig von anderen Elementen, die sich auf der Seite befinden, zum Beispiel von Texten. Das heißt, Du kannst auf diese Weise zum Beispiel ein Bild an einer bestimmten Stelle auf Deiner Seite zeigen. Mit der Eingabe von „position: absolute“ bleibt es dann auch dort.

Wie verwendest Du position absolute?

Um absolute Positionierung zu verwenden, musst Du das position-Attribut im auf „absolute“ setzen.

Im Anschluss kannst Du mithilfe der Eigenschaften „top“ (oben), „bottom“ (unten), „left“ (links), „right“ (rechts) und deren Variationen die gewünschte Position spezifizieren, an der Du das Element platziert haben möchtest.

Weiterhin wichtig: Das Ganze ist in Pixel (px) oder Prozent (%) anzugeben.

Willst Du zum Beispiel ein Element oben links auf Deiner Webseite angeben, könnte eine der Eingaben an der entsprechenden Stelle im Code wie folgt aussehen:

position: absolute; top: 10px; left: 20px; 

Außerdem kann man im Rahmen der absoluten Positionsangabe mithilfe von Maßangaben – zum Beispiel zu Größe und Abstand – arbeiten, darunter zum Beispiel: Höhe und Breite eines Elementes (height/width) oder Polsterungen (padding).

Angewendet wird die absolute Positionierung vor allem in CSS – egal, ob via Laptop oder PC.

Welche Vor- und Nachteile bringt die Verwendung von position absolute mit sich?

Die Elemente auf einer Webseite absolut zu positionieren, kann sehr hilfreich sein, wenn Du ein Element an einem bestimmten Ort auf Deiner Seite platzieren möchtest – insbesondere dann, wenn Du es unabhängig anderer Elemente festlegen willst.

Diese Eigenart kann jedoch auch zum Problem werden. Denn: Im Zuge des Gebrauchs von position absolute können dadurch die Maße von Eltern- und Kindelementen auf einer Webseite divergieren. Das heißt, sie besitzen dann zum Teil unterschiedliche Maße, was zu einem unregelmäßigen Webseitenaufbau führt.

Auf einen Blick

Als Teileigenschaft der Positionseingabebefehl im Code kann „position absolute“ genutzt werden, um Elemente auf einer Webseite an einer bestimmten Stelle zu platzieren. Das geschieht unabhängig der anderen Elemente.

Daher kann „position absolute“ ein hilfreiches Tool im Webdesign, Programmieren und Co. darstellen. Durch Richtungs- wie Maßangaben kann genau spezifiziert werden, wo das entsprechende Element später auf der Seite angezeigt wird.

FAQ zu position absolute

Was ist eine relative Position?

Wenn Du ein Element auf Deiner Webseite beispielsweise in Relation zu seiner eigentlichen Position setzen möchtest, kannst Du „position: relative“ dafür nutzen.

Was macht position: fixed?

Ähnlich wie „position absolute“ bleibt mit diesem Eingabebefehl das jeweilige Element an einer festgesetzten Stelle. Anders als „position fixed“ kannst Du mit einer absoluten Positionierung jedoch selbst bestimmen, wo das Element platziert werden soll.

Was meint Position im CSS?

Mithilfe der Angabe von „position“ kannst Du die Position von ausgewählten Elementen auf Deiner Webseite im Code festlegen.

Ähnliche Beiträge

Die mobile Version verlassen