CSS background position – Bilder perfekt anordnen!

CSS background position

CSS background position ist ein grundlegender Aspekt der CSS-Programmierung. Es verleiht den Webseiten eine individuell gestaltete Benutzeroberfläche, bei der der Hintergrund eine zentrale Rolle spielt. Mit CSS background position können Hintergründe und Bilder entsprechend auf einer Webseite angeordnet und das Erscheinungsbild der Seite ohne viel Aufwand verbessert werden – und das ganz spielerisch!

CSS background position – Was ist das eigentlich?

CSS background position kontrolliert die Art und Weise, wie sich ein Hintergrund auf einer Webseite verhält, insbesondere, wie er auf verschiedenen Seiten positioniert wird. Durch die Anpassung der Position des Hintergrunds kann das Erscheinungsbild der Website enorm verändert und den Bedürfnissen entsprechend verändert werden.

CSS background position kann dabei auch von jungen Webentwicklern und Quereinsteigern problemlos verwendet werden, da es leicht zu erlernen und anzuwenden ist und meist keine spezifischen Vorkenntnisse vonnöten sind.

CSS background position – Kurze Anleitung

Zunächst einmal wird für die Anordnung bzw. Positionierung eines Elementes auf einer Webseite ein Grundbaustein benötigt. In diesem Fall wird ein Bild in einem Box-Element positioniert. Dabei können externe und lokale Bilder mit den folgenden Endungen verwendet werden.

  • .png
  • .jpg
  • .jpeg
  • .bitmap
  • .gif
  • .webp

Mittels background-size wird die Größe des Bildes vordefiniert und mit background-repeat: no-repeat wird dargelegt, dass das Element nicht wiederholt werden soll.

.box {
width: 100%;
height: 100vh;
background-image: url(LINK);
background-repeat: no-repeat;
background-size: 200px;
}

Nun soll das Bild in diesem Beispiel an der oberen rechten Bildschirmecke positioniert werden. Hierzu wird der Befehl background-position mit dem entsprechenden Richtungswert genutzt, wie im Folgenden ersichtlich ist.

.box {
width: 100%;
height: 100vh;
background-image: url(LINK);
background-repeat: no-repeat;
background-size: 200px;
background-position: top right;
}

Mit diesem Befehl wird das Element oben rechts auf dem Bildschirm angeordnet. Weitere mögliche Werte umfassen alle möglichen Richtungen wie zum Beispiel background-position: bottom oder background-position: center.

Weiterhin ist die Anordnung eines Elementes mittels background position auch mit Pixel-Angaben möglich.

.box {
width: 100%;
height: 100vh;
background-image: url(LINK);
background-repeat: no-repeat;
background-size: 200px;
background-position: top  20px right 20px;
}

In diesem Beispiel wird das Bild oben rechts mit Rändern von jeweils 20 Pixeln positioniert. Dabei sind auch negative Werte möglich, wobei das Element bzw. Bild dann an den Rändern entsprechend zugeschnitten wird. Negative Prozentangaben subtrahieren ebenfalls Prozente aus dem Bild heraus. Letztlich lässt sich feststellen, dass negative Werte stets das Element selbst betreffen, wohingegen positive Werte für Ränder sorgen.

CSS background position zusammengefasst

Zusammenfassend lässt sich feststellen, dass CSS background position wichtig ist, um den optischen Effekt und die Funktionalität von Websites optimieren zu können. Mit den verschiedenen Anordnungsmöglichkeiten können Designer ihre Kreativität ausleben und ihre Visionen wahr werden lassen. Das spezifische Arrangement von Bildern, Elementen und Grafiken auf einer Webseite kann für eine bestimmte Art der Darstellung und des Webdesigns beitragen und somit die Benutzererfahrung enorm verbessern, aber auch für besondere Situationen ist die Repositionierung von Bildern auf einer Webseite manchmal notwendig, wie zum Beispiel um das Bild einem bestimmten Text anzugleichen und umgekehrt.

Alles was Du über CSS background position wissen solltest

Wie wählt man eine background position aus?

Eine background-Position wird ausgewählt, indem man entweder eine Kombination aus Schlüsselwörtern, prozentualen Werten oder absoluten Werten angibt. Die Schlüsselwörter beinhalten „top“, „bottom“, „left“ und „right“. Prozentuale Werte geben an, wo die obere linke Ecke des Hintergrundbildes platziert wird – 0% 0% ist die obere linke Ecke, 100% 100% die untere rechte Ecke.

Was ist eine background position in CSS?

In CSS kann mittels des Befehls background position bestimmt werden, wo ein Hintergrundbild im Verhältnis zu einem HTML-Element angezeigt werden soll.

Wie positioniert man ein Bild mittels CSS background position?

Um ein Bild mittels CSS background-Position zu positionieren, muss der Befehl background-position in Verbindung mit einer Richtungsangabe verwendet werden. Hierbei können x- und y-Werte in Prozenten oder Pixeln gleichermaßen angegeben werden, um die richtige Position des Hintergrundbildes zu bestimmen.

Listen gestalten mit CSS List Style: eine hilfreiche Einführung

css-list-style

Eine Webseite kann man durch viele unterschiedliche Eingabebefehle steuern… ob Gradient, Overflow oder ähnliches. CSS List Style gehört dazu. Was genau das ist, welche Formen es gibt und wie Du es für Dich nutzen kannst, zeigen wir Dir jetzt.

CSS List Style kurz erklärt

CSS List Style ist ein Teil der CSS-Spezifikation, mit dem Du die Darstellung von Listen in HTML definieren kannst. Hierbei ist es egal, ob es sich um geordnete Listen (ol) oder um ungeordnete Listen (ul) handelt. Auf beide Listenarten hat der Eingabebefehl dieselben Auswirkungen.

Inwieweit kann man die jeweiligen Listen nun gestalten? Du kannst sie mit verschiedenen Eigenschaften wie zum Beispiel einer speziellen Schriftart, einer anderen Farbe oder einem Füllbild einrichten. Weiterhin kannst Du mithilfe von CSS List Style auch ein Zeichen oder ein Symbol an die entsprechenden Listenelemente anhängen.

Warum ist die Gestaltung von Aufzählungen und Co. überhaupt relevant? Wenn Du zum Beispiel per Laptop an Deiner Webseite arbeitest, kannst Du durch diesen Eingabebefehl ein Navigationsmenü optisch ansprechend gestalten. Auch Slideshows zu programmieren, ist damit möglich. Für ein responsives Webdesign kann CSS List Style essenziell sein.

Außerdem: Für diesen Eingabebefehl gibt es eine Shorthand: list-style. Alle im Folgenden aufgelisteten Variationen sind in dieser Shorthand enthalten.

Eigenschaften von CSS List Style

Es gibt eine Reihe von unterschiedlichen Eigenschaften, die Du mithilfe des CSS-Listenstils anwenden kannst. Darunter:

listen-style-type

Mit der Eigenschaft list-style-type kannst Du Zeichen, Symbole, Ziffern oder Buchstaben an die Listenelemente anhängen. Für geordnete Listen eignen sich hier eher Ziffern/Buchstaben, während Zeichen und Symbole für ungeordnete Aufzählungen gedacht sind. Einige Beispiele für mögliche Symbole in diesem Zusammenhang sind: Kreise, Quadrate, Diskette, Haken, Pfeile und Sterne.

Hier ist ein Beispiel für die Verwendung von list-style-type in CSS bei einer ungeordneten Liste:

ul { 
list-style-type: circle;
 } 

In diesem Beispiel definieren wir die Liste mit der list-style-type-Eigenschaft als „Kreis“. Das bedeutet, dass vor jedem Element in der Liste ein Kreiszeichen angezeigt wird.

list-style-position

Die Eigenschaft list-style-position verwendet man, um festzulegen, wo der Punkt einer Liste angezeigt wird. Es gibt zwei mögliche Werte: innen (inside) und außen (outside). Der Standardwert für diese Eigenschaft ist in der Regel außen, was bedeutet, dass der Punkt neben dem ersten Zeichen des Listenelements angezeigt wird.

Beispielsweise kannst Du die Listenstil-Position anwenden, um eine ungeordnete Liste wie folgt zu erstellen:

ul { 
list-style-position: outside;
 } 

Der Standardwert würde jedem Listenelement einen Punkt außen vor dem ersten Zeichen des Listenelements hinzufügen. Das sähe auf der Webseite wie folgt aus:

• 1. Punkt
• Punkt 2
• 3. Punkt

Wenn Du die Listenstil-Position auf innen festlegst, wird der Punkt innerhalb des Listenelements angezeigt, direkt vor dem ersten Zeichen:

Erster Punkt •
Zweiter Punkt •
Dritter Punkt •

Dies ist ein nützliches Tool, wenn Du Deine Liste auf eine einzigartige Weise hervorheben willst. Es kann auch verwendet werden, um die Lesbarkeit einer Liste zu verbessern.

Kleine abschließende Randnotiz: Innerhalb des Eingabebefehls list-style-position ist es außerdem möglich, Hintergründe (durch background) und Abstände (durch padding) sowie Richtungen (left, right, center) der Liste in Kombination festzulegen. Programmierst Du zum Beispiel, dass das Symbol links vom Text platziert wird, wird es auf Deiner Webseite auch auf der linken Seite des Textes angezeigt.

list-style-image

Ein Bild als Listensymbol kannst Du mit der Eigenschaft list-style-image auswählen. Wenn Du diese Eigenschaft vorher festlegst, musst Du den entsprechenden Pfad zu dem Bild angeben, welches Du als Listensymbol verwenden willst. Alternativ kannst Du auch ein Bild anstelle eines Symbols an die Listenelemente anhängen.

Hier ist ein einfaches Beispiel für eine ungeordnete Liste, die eine Sonne als Bild in der Liste zeigen würde:

ul { 
list-style-image: url("images/sun.png");
 }

Da diese Eigenschaft von Eltern- zu Kindelementen übernommen werden kann, kann sie vererbt werden.

list-style: none

Schließlich kannst Du auch eine benutzerdefinierte Liste erstellen, indem Du den list-style-type auf „none“ setzt. Dies bedeutet, dass kein Zeichen vor jedem Element in der Liste angezeigt wird. Bei einer ungeordneten Liste sähe das etwa so aus:

 ul { 
list-style-type: none;
 }

::marker

Abschließend: Die farbliche Gestaltung einer Liste im CSS kann man über die Art und Weise der Markierung (::marker) festlegen.

Wenn Du zum Beispiel eine Liste hast, kannst Du nach der Eingabe eines Listenpunktes diese Spezifikation hinzufügen und dann zum Beispiel die entsprechende Farbe eingeben. Soll ein Listenpunkt beispielsweise rot markiert werden, schreibst Du:

li::marker { 
color: red;
 }

Auf einen Blick

Zusammenfassend kann gesagt werden, dass CSS List Style eine sehr nützliche Funktion darstellt, um Listen in HTML anzupassen. Mit verschiedenen Eigenschaften – darunter listen-style-type, -postion, -image, listen-style: none sowie ::marker – kannst Du die Darstellung von (un-)geordneten Listen auf Deiner Webseite optisch anpassen und sie ansprechender gestalten. Das kannst Du zum Beispiel bei Navigationsfeldern oder Slideshows machen.

FAQ zu css list style

Was ist list-style-type in CSS?

Mithilfe dieses Eingabebefehls kannst Du Symbole, Ziffern und/oder Buchstaben an Listen anhängen.

Wie kann ich eine bestimmte Liste in CSS gestalten?

Die farbliche Gestaltung eins Listenpunktes steuerst Du über die Markierung (::marker).

Wie zeige ich eine Liste in CSS?

Durch den Eingabebefehl über display: list-item. Hierbei kannst Du mit den gängigen Eigenschaften zu CSS List Style weiterhin die Liste wie normal festlegen.

CSS text-align – Texte problemlos nach Belieben ausrichten!

CSS text-align

CSS text-align ist ein CSS-Attribut, das die Struktur und Ausrichtung von Texten innerhalb eines HTML-Elements oder eines CSS-Blocks beeinflusst. Es wird vor allem verwendet, um Text-Elemente innerhalb einer Box oder eines Divs auf links- oder rechtsbündig, mittig oder als Blocksatz auszurichten.

CSS text-align – Was ist das eigentlich?

Mithilfe von CSS text-align lassen sich Text-Elemente durch übergeordnete Eltern-Elemente in spezifischer Art und Weise ausrichten. Insbesondere für Wörterbücher oder Blogs ist CSS text-align ein unerlässliches Tool zur ästhetischeren Aufbereitung und Gestaltung von Texten.

Kurze Anleitung zu CSS text-align

CSS-Textausrichtungen sind nicht nur sehr nützlich, sondern auch notwendig, wenn man eine Seite möglichst ansprechend gestalten möchte. Man kann bestimmte Texte auf der Seite neu ausrichten, um eine bestimmte visuelle Wirkung zu erzielen oder auf ein anderes Element auf der Seite aufmerksam zu machen. Das Attribut lässt sich ganz einfach auch von Anfängern und Menschen ohne CSS Vorkenntnissen umgesetzt werden, wodurch es umso nützlicher ist!

Schritt 1: Eltern-Element definieren

main {
   border: 3px red;
   margin: 1rem;
   padding: 1rem;

}

Schritt 2: Text ausrichten – links/rechts

main {
   border: 3px red;
   margin: 1rem;
   padding: 1rem;
   text-align: right;
}

Die möglichen Werte für text-align sind:

  • left
  • right
  • center
  • justify
  • inherit

Während der Text mit dem Wert „left“ nach links ausgerichtet wird, wird er mit dem Wert „right“ nach rechts gerichtet.

Schritt 3: Text ausrichten – mittig

main {
   border: 3px red;
   margin: 1rem;
   padding: 1rem;
   text-align: center;
}

Mit dem Wert „center“ richtet sich der Text mittig aus. Dabei ist es wichtig zu wissen, dass sich lediglich der Text in Relation zum ihm übergeordneten Block ausrichtet. Dahingegen verteilt sich der Text mit „justify“ auf die gesamte Breite des Elements und ähnelt von der Struktur her dem Blocksatz.

Wenn text-align auf „inherit“ eingestellt ist, erbt das untergeordnete Element die Eigenschaften des übergeordneten Eltern-Eements.

main {
   border: 3px red;
   margin: 1rem;
   padding: 1rem;
   text-align: center;
}

p {
   font-size: 1.5rem;
   background-color: blue
   margin: 1rem 0;
   padding: 1rem;
   text-align: inherit;
}

In diesem Fall wird der Text zentriert und nicht nach Standardeinstellungen nach links ausgerichtet.

Untergeordnete Elemente, die keinen text-align Wert zugewiesen bekommen haben, erben ebenfalls die Zuweisung des Eltern-Elements, wie es im folgenden Beispiel ersichtlich wird.

main {
   border: 3px red;
   margin: 1rem;
   padding: 1rem;
   text-align: center;
}

p {
   font-size: 1.5rem;
   background-color: blue
   margin: 1rem 0;
   padding: 1rem;
}

P besitzt kein text-align Attribut und erbt deshalb das text-align Attribut des Eltern-Elements. In dem Fall wird der Text also ebenfalls zentriert.

Besonders wichtig zu wissen ist, dass text-align keinen Einfluss auf container oder Blöcke wie divs hat. Es bezieht sich ausschließlich auf Texte. Wenn ein Header in seiner width auf 50% eingestellt ist und als text-align: center zugewiesen bekommt, wird sich der Titel lediglich im halbierten Header zentriert ausrichten. Ist zudem ein margin vordefiniert, wie in unserem obigen Beispiel, wird der Titel nicht auf exakt 50% des Headers zugeschnitten, da der margin – also der Rand – ebenfalls Teil des Headers ist.

CSS text-align zusammengefasst

Die CSS-Eigenschaft „text-align“ ermöglicht es dem Anwender, die Ausrichtung des Inhalts innerhalb eines HTML-Elements festzulegen. Es gibt mehrere Werte, die für diese Eigenschaft verfügbar sind. Dieses Attribut kann verschiedenste Text-Elemente in kreativer und ästhetischer Weise anordnen und ist somit ein sehr nützliches Tool – Für Anfänger und Fortgeschrittene zugleich!

Alles was Du über CSS text-align wissen solltest

Wie richtet man Texte mit CSS text-align aus?

Mit CSS text-align kann man Texte in besonderer Art und Weise ausrichten, indem man die Werte „left„, „center„, „justify“ oder „right“ nutzt.

Wie zentriert man Texte in CSS?

Um Texte in CSS zu zentrieren nutzt man das CSS Style Attribut text-align: center. Es muss dem entsprechenden HTML-Element des zu zentrierenden Textes zugewiesen werden.

Was bedeutet CSS text-align: justify?

CSS text-align: justify bewirkt eine blocksatz-artige Ausrichtung im übergeordneten Element. Der Text verläuft somit in einer geraden Linie von links und rechts am Rande des Containers entlang.

before und after: Gestaltungshilfe durch Pseudoelemente

before-after

Um kleinere Änderungen an den Inhalten auf Deiner Webseite am Laptop oder PC vorzunehmen, kannst Du die Pseudo-Elemente before und after nutzen. Sie können die einiges an Arbeit beim Programmieren abnehmen. Wie das Ganze funktioniert und Wie Du before und after für Dich nutzen kannst, stellen wir Dir im Folgenden vor.

Worum handelt es sich bei before und after?

Im Zuge des Eingabebefehls von CSS Content werden die Elemente ::before und ::after genutzt. Dabei handelt es sich um sogenannte Pseudo-Elemente, die anderen HTML-Elementen hinzugefügt werden können, um zusätzliche visuelle und/oder ästhetische Effekte zu erzeugen.

Hierbei gilt: Man kann es vor ein Element (before) oder danach (after) setzen. Um was für einen Inhalt es sich bei dem entsprechenden Pseudo-Element handelt, kann unterschiedlich sein – egal, ob Texte, Listen oder Bilder.

Nutzung von before und after

Die Eingabe von before/after nutzt man daher oft, um bestehende Entwürfe mit diversen HTML-Elementen zu verbessern: Beispielsweise kann man ein Element mit einem before- und after-Element formatierten, um eine bestimmte Breite oder Höhe zu erzielen, oder um die Position des Elements zu ändern.

Oder man gebraucht die Eingabe, um ein Element visuell zu gestalten und/oder hervorzuheben. So finden sie Verwendung, um ein Menü oder einen Link zu verzieren. Sie können aber auch gebraucht werden, um ein Symbol oder ein Bild vor bzw. nach einem Element zu platzieren.

In diesem Zusammenhang praktisch: before und after können ebenfalls verwendet werden, um gewisse Elemente zu gruppieren. Zum Beispiel kannst Du das before-Pseudo-Element hinzufügen, wenn Du eine Liste von Elementen hast, um die Liste zu kennzeichnen; ein after-Element hingegen kannst Du nutzen, um diese zu beenden.

In CSS können diese Pseudo-Elemente mithilfe der „::before“- und „::after“-Syntax definiert werden.

Willst Du zum Beispiel die Farbe am Ende des Satzes „Wir lieben die Farbe Grün“ von Schwarz in Grün ändern, kannst Du das mit ::after tun.

Hierbei steht im HTML-Codeschnipsel …

<p class="text">Wir lieben die Farbe</p>

… und in CSS würde dann entsprechend stehen:

.text::after{
  content: "Grün";
  color: green;
}

Eingabe wie diese kannst Du auf die unterschiedlichste Weise und vielfältig nutzen. Die before-after-Syntax ermöglicht es daher, verschiedene Arten von Inhalten wie Grafiken, Texte, Listen, Hintergrundfarben und vieles mehr zu gestalten. Mit der richtigen Kombination von CSS-Anweisungen können before- und after-Elemente gleichermaßen in einem Design benutzt werden, um einzigartige und interessante Ergebnisse zu erzielen.

Achtung: In den meisten Fällen sollten before- und after-Elemente nur verwendet werden, um kleine Änderungen vorzunehmen, da sie bei falscher Anwendung die Seitenladezeit beeinträchtigen können.

Auf einen Blick

Mithilfe der Pseudo-Elemente before und after kann man Webdesigns verbessern und einzigartige visuelle Effekte erzeugen. Man gebraucht sie, um Elemente einzufügen, zu formatieren, zu gestalten und zu gruppieren. Sie tauchen in der Regel im Zusammenhang mit dem entsprechenden Content in CSS auf – in der Schreibweise „::before“ sowie „::after“.

FAQ zu before und after

Was bewirkt das „before“ in CSS?

Durch die Eingabe von „::before“ wird der Inhalt vor einem Element angepasst. Das kann auf unterschiedliche Weise geschehen, zum Beispiel kannst Du den Satzbeginn eines Satzes farblich anders gestalten.

Wie fügt man before und after bei einem Bild in CSS ein?

Zuerst erstellst Du das entsprechende Bild im Code. Danach setzt Du die Pseudo-Elemente in den Code ein. Nun musst Du nur noch die Art und Weise definieren, in der das Bild angepasst werden soll – zum Beispiel seine Position, seine Farbgestaltung, etc.

Wie setzt man in CSS eine Zeile vor und nach einen Text?

Hierbei kannst Du ähnlich vorgehen. Zuerst erstellst Du den Text. Danach stellst Du die Parameter für den Text fest. Zum Schluss fügst Du die Pseudo-Elemente ein – mit den entsprechenden Änderungen für die Zeile.

Nutze Deinen Raum! Justify Content im CSS erfolgreich verwenden

justify-content-css

Für die Gestaltung einer Webseite ist nicht nur die Farbgebung – zum Beispiel über CSS Gradient – wichtig, sondern auch die Platzierung von Abständen. Neben dem Padding gibt es so zum Beispiel auch die Eigenschaft Justify Content im CSS. Was mithilfe dieses Tools bewirkt wird und wie man es nutzen kann, erfährst Du nun.

Was ist Justify Content im CSS?

Diese Eigenschaft findet im CSS Verwendung.

Justify Content legt fest, wie man die inhaltlichen Elemente – der Content – in einem Flex-Container platziert. Genauer: Inwieweit die Elemente Raum in Relation zur Hauptachse dieses Containers sowie in Abhängigkeit zum Grid-Container finden.

Daher hilft es dabei, den Inhalt eines flexiblen Containers zu positionieren und zu organisieren. Man kann es also verwenden, um ansprechende Layouts zu erstellen.

Anwendung und Formen

Justify Content akzeptiert verschiedene Werte, die bestimmen, wie die sich Elemente im Flex-Container aufteilen. Welche Werte gehören dazu?

  • flex-start: Mit dieser Attribuierung kann man alle Elemente am Beginn der Flex-Container-Hauptachse platzieren. Folgend verteilt sich der Content auf der Achse nach hinten. Es kann vorkommen, dass am Schluss Abstände entstehen.
  • flex-end: Die Hinzugabe dieses Wertes bedeutet essenziell die dasselbe wie „flex-start“ – mit dem Unterschied, dass in diesem Fall die Richtung (vom Ende zum Anfang) geändert ist.
  • center: Der center-Wert positioniert alle Elemente gleichmäßig in der Mitte der Flex-Container-Hauptachse. Abstände können am Anfang und am Ende der Achse auftreten.
  • left/right: Funktioniert in derselben Weise wie der center-Wert, lediglich ausgehend von links oder rechts.
  • space-between: Ähnlich wie der center-Wert verteilt man mit „space-between“ jeglichen Content, den man hat, von der Mitte der Hauptachse ausgehend gleichmäßig im flexiblen Container. Der Unterschied zu „center“ besteht darin, dass es keine Abstände am Anfang und am Schluss der Achse gibt.
  • space-around: Auch dieser Wert hat seinen Start in der Hauptachsenmitte des Flex-Containers, mit jeweils gleichbleibenden Abständen zwischen den Inhaltselementen. Er bewirkt dasselbe – mit dem Unterschied, dass die Abstände zu Beginn und zum Schluss der Achse um die Hälfte reduziert sind.
  • space-evenly: Bei diesem Wert gilt ebenfalls dasselbe (ausgehend von der Mitte, regelmäßig verteilte Inhaltselemente). Was bildet hierbei das Unterscheidungskriterium? Die Abstände zu Beginn und zum Schluss der Achse sind mit denen zwischen den jeweiligen Inhaltselementen identisch.
  • normal: Dieser Wert stellt die Standarteinstellung dar. Seine Wirkung auf der angezeigten Webseite ähnelt „stretch“.
  • stretch: Wichtig – diese Wertzuschreibung funktioniert lediglich bei Grid-Containern! Durch den stretch-Wert werden alle Inhaltselemente so gestreckt, dass sie den Raum des Containers vollkommen füllen.
  • safe/unsafe: Diese beiden Werten geben an, wie (un-)sicher es ist, dass die Verteilung der Inhaltselemente aus dem entsprechenden Container hinausgehen oder nicht. Dadurch ist zum Beispiel die Lesefreundlichkeit einer Webseite abhängig. Man vermeidet ein „Überlaufen“.

Willst Du nun zum Beispiel den Eingabebefehl für Justify Content im CSS vornehmen, schreibst Du an die entsprechende Stelle im Code Folgendes:

.verteilt { justify-content: value; }

„value“ ändert sich hierbei je nachdem, welchen Wert Du einsetzen willst – ob „center“, „space-evenly“ oder Ähnliches ist komplett Dir überlassen.

Auf einen Blick

Die Einstellung von Justify Content im CSS ist also sehr nützlich, wenn es darum geht, den Inhalt eines flexiblen Containers zu positionieren und zu organisieren. Mithilfe von unterschiedlichen Wertzuschreibungen kann man es verwenden, um ansprechende Layouts am Laptop oder PC zu erstellen sowie den Inhalt eines Flex-Containers an die Anforderungen des Benutzers anzupassen, und stellt ein mächtiges Werkzeug beim Programmieren dar, das dabei hilft, ansprechende Layouts zu erstellen.

FAQ zu Justify Content im CSS

Was ist justify-content im CSS?

Hierbei handelt es sich im eine Eigenschaft im CSS, die dabei helfen kann, Inhaltselemente im Flex-Container zu platzieren.

Wie wird es genutzt?

Man nutzt es über den Eingabebefehl: justify-content. Je nachdem, wie man den Raum verteilen möchte, folgt danach noch die entsprechende Wertzuschreibung.

Wie richtet man Inhalte (content) im CSS aus?

Genutzt werden kann hierbei zum Beispiel: justify-content (für Inhaltselemente) oder text-align (für Texte/Textblöcke).

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

position-absolute

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.

Skalieren wie ein Profi mit CSS Object Fit für Bilder, Videos und Co.

css-object-fit

Seine eigene Webseite zu erstellen, ist nicht immer leicht. Um Abhilfe beim Programmieren am Laptop oder PC zu schaffen, gibt es Eingabebefehle wie CSS Object Fit, die Dir einiges erleichtern können. Alles Wissenswerte zu diesem Thema haben wir Dir daher in diesem Beitrag zusammengefasst.

CSS Object Fit: Was das ist

Bei CSS Object Fit handelt es sich um einen Eingabebefehl, dessen man sich in der Arbeit mit CSS bedient. Er ermöglicht es angehenden Entwicklern, Bilder und andere Objekte (zum Beispiel Videos) auf eine Weise zu skalieren, dass sie genau in den vorgegebenen Rahmen passen, zum Beispiel direkt nach der Bearbeitung von diesen Elementen.

Man verwendet CSS Object Fit für eine Vielzahl von Zwecken – von der Größen- und Positionsanpassung von Bildern auf einer Webseite bis hin zur Erstellung von responsiven Design-Layouts.

Verwendung von CSS Object Fit

CSS Object Fit funktioniert durch die Verwendung von verschiedenen Skalierungs- und Positionierungsregeln, die man anpassen kann, um das jeweils gewünschte Ergebnis zu erzielen.

So gibt es mehrere grundlegende Eigenschaften, die man dahingehend nutzen kann: „fill“ (ausgefüllt), „contain“ (eingedämmt), „cover“ (gedeckt), „none“ (keine) und „scale-down“ (verkleinert).

  • „fill“ bedeutet, dass das Objekt in seiner vollständigen Größe angezeigt wird. Sollte es nicht mit dem vorgegebenen Aspect Ratio übereinstimmen, streckt man es auf die jeweiligen Seitenverhältnisse – man füllt sie aus.
  • „contain“ meint die Skalierung des Objektes insoweit, dass es vollständig in den vorgegebenen Aspect Ratio passt. Zwar behält man die Seitenverhältnisse bei, doch sollte diese auf das neue Format nicht passen, kommt das sogenannte Letterboxing zum Einsatz.
  • Durch „cover“ skaliert man das Objekt soweit, dass es den vorgegebenen Rahmen ausfüllt. Entsprechende Zuschneidungen sind möglich.
  • „none“ heißt, dass das Objekt im Originalzustand und ohne Skalierung angezeigt wird.
  • Mithilfe von „scale-down“ ist man in der Lage, das Objekt später wie mit „none“ oder „contain“ anzuzeigen. Hierbei ausschlaggebend ist, was später beim Anzeigen auf der Webseite besser passt bzw. zu einer genaueren Angabe der Maßverhältnisse führt.

Zum Beispiel sähe ein Bild, welches man mithilfe der contain-Eigenschaft entsprechend auf seiner Webseite anpassen möchte, im CSS-Code wie folgt aus:

object-fit: contain;

In der Regel schreibt man es direkt hinter die entsprechende Bildbeschreibung, bei der man unter anderem noch Bildmaße und Ähnliches angibt (zum Beispiel: width, height, etc.).

Für die Anpassung eines Videoformates geht man ähnlich vor. Hierbei schreibt man es lediglich hinter die Videobeschreibung im CSS-Code.

Kleine Randnotiz vor diesem Hintergrund: Man kann den Eingabebefehl von CSS Object Fit auch in HTML nutzen.

Außerdem kann man den Object Fit nutzen, um Objekte zu direkt positionieren bzw. an einer bestimmten Position im Rahmen auszurichten. Dies geschieht über den Eingabebefehl object-position. Man kann es auf verschiedene Arten und Weisen mit Werten angeben. Zum Beispiel…

  • durch die Angabe durch Positionseigenschaften, einschließlich „center“ (mittig), „top“ (oben), „bottom“ (unten), „left“ (links), „right“ (rechts) und Variationen davon.
  • mithilfe von Pixelangaben (px).
  • durch die Angabe von Prozenten (%).
  • mithilfe von Längenangaben, darunter unter anderem Zentimeter (cm), Charrière (ch) oder Ems (em).

Vorteile von CSS Object Fit

In verschiedenen Situationen kann Object Fit sehr nützlich sein. Zum Beispiel…

  • um Bilder auf einer Webseite zu skalieren und anzupassen, ohne dass man die Seitenverhältnisse ändert.
  • damit man ein responsives Design erstellt, indem man verschiedene Versionen eines Bildes für verschiedene Bildschirmgrößen skaliert.
  • um Elemente wie Bilder auf verschiedenen Geräten anzuzeigen, ohne dass man eine einzelne Version des Bildes für jedes Gerät erstellen muss.

Auf einen Blick

Um Elemente auf einer Webseite entsprechend zu skalieren, nutzt man in der Regel CSS Object Fit. Er bietet allerlei Vorteile, darunter: die Anpassung der Objekte ohne Änderung an den Seitenverhältnissen und dadurch eine erhöhte Benutzerfreundlichkeit auf unterschiedlichen Geräten.

Wie kann ein Element mit Object Fit angepasst werden? Durch folgende Eigenschaften: fill, cover, contain, none und scale-down. Weiterhin kann in diesem Zusammenhang die Positionierung des Elementes mithilfe des Eingabebefehls object-position geändert werden.

FAQ zu CSS Object Fit

Was bedeutet object-fit?

Mithilfe dieses Eingabebefehls gibt man die Skalierungsart eines bestimmten Elementes – zum Beispiel eines Bildes – an.

Kann ich object-fit in DIV verwenden?

Die Verwendung dieses Eingabebefehls in DIV ist umsetzbar. Die Eingabe erfolgt innerhalb des entsprechenden DIV-Tags.

Kann ich object-fit: contain nutzen?

Möglich ist das, ja – nicht nur für Videos, sondern auch für Bilder.

SVG Path – Erstellung von Grafiken leicht gemacht

svg path

SVG Path ist ein leistungsstarkes Werkzeug, das Entwickler verwenden können, um komplexe Grafiken direkt in HTML und CSS zu erstellen. SVG Paths sind besonders nützlich für die Erstellung von Bildern und Animationen, die besonders auffällig sein sollen. In diesem Artikel werden wir uns ansehen, wie man SVG Paths verwendet, um Grafiken und Animationen zu erstellen, die sowohl attraktiv als auch funktionell sind.

Was versteht man unter SVG Path?

SVG Path ist eine Technik, die Du verwenden kannst, um Wege, Kurven oder andere Grafiken in einem vektorbasierten Bildformat (SVG) darzustellen. Es ist eine der grundlegenden Techniken, mit der Grafiken auf Webseiten und in Anwendungen erstellt und angezeigt werden können. SVG Paths sind besonders nützlich, wenn Du Grafiken erstellen oder ändern möchtest, ohne dass es die Qualität des Bildes beeinträchtigt.

SVG Paths werden auch als „Geometrie-Definitionen“ bezeichnet, da Du sie dazu verwenden kannst, die Geometrie einer Grafik zu definieren. Ein SVG Path kann aus einzelnen Kurven, Linien, Bögen, Punkten und anderen geometrischen Elementen bestehen. Diese Elemente musst Du alle mit Parametern definieren, die die Position, Größe, Form und andere Eigenschaften der Grafik bestimmen.

SVG Paths sind sehr flexibel, da Du sie an jeden beliebigen Punkt auf der Grafik anpassen kannst. Dies macht sie ideal für die Erstellung von Responsive Design-Grafiken, die sich an verschiedene Bildschirmgrößen anpassen. SVG Paths kannst Du auch verwenden, um dynamische Grafiken zu erstellen, die sich auf bestimmte Interaktionen des Benutzers reagieren.

SVG Paths können auch in einer Vielzahl von Programmiersprachen verwendet werden, einschließlich HTML, JavaScript und CSS. Dies bedeutet, dass man SVG Paths leicht in Web- oder Anwendungsprojekte integrieren kann, ohne aufwendige Programmierarbeit leisten zu müssen.

Wie verwendet man SVG Path?

SVG Paths kannst Du auf verschiedene Weise verwenden, um das Webdesign zu verbessern. Zum Beispiel kannst Du sie verwenden, um Logos, Schaltflächen, Icons, Bilder und mehr zu erstellen, die responsive sind und sich an verschiedene Bildschirmgrößen anpassen. Sie können auch verwendet werden, um komplexe Formen und Animationen zu erstellen, die einzigartig und ansprechend aussehen und sich reibungslos an die verschiedenen Bildschirme anpassen.

Ein weiterer wichtiger Vorteil von SVG Paths ist, dass sie sehr klein sind. Sie sind in der Lage, komplexe Grafiken zu erzeugen, die in einer sehr kleinen Dateigröße gespeichert werden können, was die Ladezeiten der Website erheblich verbessert.

Um SVG Paths zu verwenden, musst Du zuerst ein SVG-Bild erstellen. Dies kann mit einem SVG-Editor wie Adobe Illustrator oder Inkscape erfolgen. Nachdem Du Dein SVG-Bild erstellt hast, kannst Du es öffnen und die Paths bearbeiten, die Du benötigst. Dies erfolgt normalerweise mithilfe eines Werkzeugs wie eines Path-Editors.

Sobald Du Deine Paths bearbeitet hast, solltest Du sie auf Deiner Website einfügen. Dies kann auf verschiedene Weise erfolgen, abhängig vom verwendeten CMS oder Framework. Oftmals kannst Du die Paths direkt in den HTML-Code Deiner Website einfügen oder sie als Bilddatei speichern und über ein Image-Tag in Deinem HTML-Code einbinden.

Vorteile und Nachteile

Wie jedes Tool besitzt auch SVG Path einige Vor- und Nachteile, die Du wissen solltest.

Vorteile:

  • Skalierbarkeit: Einer der größten Vorteile von SVG Path ist, dass es skalierbar ist. Die Grafiken kannst Du bei Bedarf vergrößern oder verkleinern, ohne dass sie Pixelation oder Verzerrung erleiden. Dies ist besonders nützlich, wenn Du Grafiken auf verschiedenen Bildschirmgrößen anzeigen möchtest.
  • Kompatibilität: SVG Path ist weit verbreitet und kompatibel mit allen modernen Browsern und Betriebssystemen. Du kannst es auch problemlos in HTML-Seiten integrieren, um interaktive Grafiken zu erstellen.
  • Animationen: SVG Path kann verwendet werden, um animierte Grafiken zu erstellen, die sich bei Bedarf ändern können. Dies ist eine sehr nützliche Funktion für Entwickler, die Grafiken mit dynamischen Inhalten erstellen möchten.
  • Kosteneffizienz: SVG Path erfordert wenig Speicherplatz, weshalb es für Entwickler sehr kosteneffizient ist.

Nachteile:

  • Komplexität: SVG Path kann sehr komplex sein und erfordert gewisse Programmierkenntnisse, um es effektiv zu verwenden.
  • Fehlertoleranz: SVG Path hat ein geringes Maß an Fehlertoleranz, was bedeutet, dass kleine Fehler in der Programmierung zu größeren Problemen führen können.
  • Kompatibilitätsprobleme: Obwohl SVG Path mit den meisten modernen Browsern kompatibel ist, gibt es einige ältere Browser, die Schwierigkeiten haben, die Grafiken korrekt anzuzeigen.

Das Wichtigste in Kürze

Insgesamt ist SVG Path eine leistungsstarke Technik, die es ermöglicht, Grafiken mit hoher Qualität und Flexibilität zu erstellen. Es ist eine sehr nützliche Technik für die Erstellung von Responsive Design-Grafiken, dynamischen Grafiken und anderen Grafiken, die Du auf Webseiten und in Anwendungen verwenden kannst.

Häufig gestellte Fragen zum Thema SVG Path

Was bedeutet SVG Path?

SVG Paths sind eine Art von Vektorgrafik, die eine Reihe von Befehlen verwendet, um eine Reihe von Linien und Kurven zu erstellen, die miteinander verflochten sind und ein bestimmtes Bild bilden. Sie werden verwendet, um visuelle Elemente in Webseiten und anderen digitalen Medien zu erstellen und sind eine objektorientierte Methode zum Erstellen von Vektorbildern.

Lohnt sich die Nutzung von SVG Path?

Ja, die Verwendung von SVG Path lohnt sich. SVG Path ermöglicht eine präzise und performante Visualisierung von 2D-Grafiken und Animationen. Es ist ein sehr leistungsfähiges Tool, das es Dir ermöglicht, eine Vielzahl komplexer Grafiken zu erstellen und zu animieren.

Ist die Verwendung von SVG Path kompliziert?

Die Verwendung von SVG Path ist nicht kompliziert und lohnt sich. SVG Paths bieten eine optimierte Präsentation von Bildern, weil sie kleiner als Bitmaps sind und über eine bessere Skalierbarkeit verfügen.

CSS Position

CSS Position

CSS Position ist einer der wichtigsten Eigenschaften beim Erstellen von Websitelayouts mit CSS. Dieser Artikel soll Dir alle notwendigen Informationen zum Thema CSS Position geben.

CSS kurz erklärt


CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die für das Darstellen von HTML-Dokumenten verwendet wird. CSS ist eine der beliebtesten Sprachen im Web und wird von den meisten Websites verwendet. Mit dieser Sprache kannst Du verwenden, um die Größe, Farbe und Schriftart von HTML-Elementen zu ändern.

Es kann auch verwendet werden, um die Positionierung von Elementen auf einer Seite zu steuern. CSS ist eine komplexe Sprache und es gibt viele verschiedene Arten, CSS-Stylesheets zu erstellen. In diesem Artikel werden wir einige der grundlegenden Konzepte von CSS Position erläutern. Es gibt weitere CSS Arten und Umsetzungsformen wie CSS Flexbox und CSS Grid, welche auf Bildschirmen dargestellt werden können.

Die Eigenschaft Position bei CSS

CSS position (englisch für „Position“) ist eine CSS-Eigenschaft, mit der man das Verhalten eines HTML-Elements beim Rendering bestimmen kann.

Die Eigenschaft hat folgende Werte:

static: Das Element wird normal dargestellt.

relative: Das Element wird relativ zu seiner normalen Position dargestellt.

absolute: Das Element wird relativ zu seinem nächsten Parent-Element dargestellt, das kein static ist.

fixed: Das Element wird relativ zum Viewport (Fenster) dargestellt und bleibt beim Scrollen an seiner Position.

sticky: Das Element bleibt wie bei fixed an einer Steller, allerdings erst, wenn auf der Seite bis zu einem bestimmten Punkt gescrollt wurden ist

Die CSS-Eigenschaft position wird hauptsächlich verwendet, um das Verhalten von Elementen zu bestimmen, die mit dem Wert absolute oder fixed positioniert sind.

Bei absoluter Positionierung wird ein Element relativ zu seinem nächsten Parent-Element positioniert, das kein static ist. Wenn also ein Element absolut positioniert ist, aber kein Parent-Element hat, das kein static ist, wird es relativ zum Viewport positioniert.

Ein element mit dem Wert fixed wird immer relativ zum Viewport positioniert. Das bedeutet, dass es sich beim Scrollen nicht mitbewegt.

CSS position: static


CSS position: static bedeutet, dass ein Element in seiner normalen Position bleibt. Es wird nicht von anderen Elementen verschoben.

Das ist die Standardeinstellung für alle HTML-Elemente. Wenn Du also nicht explizit position: relative; oder eine andere Positionierung angibst, wird das Element position: static sein.

Ein element ist static positioned, wenn es sich nicht absolut oder relativ positioniert. Static bedeutet in diesem Kontext, dass das Element nicht aus seiner normalen Positionierung herausgerissen wird. Es bleibt also genau dort, wo es im Dokumentfluss erscheinen würde.

Es gibt einige Eigenschaften, die nur auf Elemente mit einer Positionierung wirken (z.B. z -index und float). Auf Elemente mit der Position static haben sie keine Auswirkungen. In diesem Beispiel wird ein div-Element mit der Position static dargestellt. Das bedeutet, dass es sich genau an der Stelle befindet, an der es im Dokumentfluss erscheint.

div { position: static; 
width: 100px; 
height: 100px; 
background-color: red; 
}

CSS position : relative

CSS position: relative ermöglicht es einem Element, sich relativ zu seiner normalen Position zu bewegen. Die Position eines Elementes wird normalerweise durch seine Platzierung in einem HTML-Dokument bestimmt, aber mit position: relative kann ein Element seine Position innerhalb eines Dokumentes ändern.

Das position: relative Element wird normalerweise dazu verwendet, ein anderes Element auf der Seite zu positionieren. Zum Beispiel kann ein Button mit position: relative ein anderes Element auf der Seite überlappen. In dem folgenden Beispiel wird ein Button mit position: relative in der Mitte eines Div-Elements platziert.

div { width: 400px;
 height: 400px; 
background: lightblue; 
position: relative; 
} 
button { position: absolute; 
top: 50%; left: 50%; 
transform: translate(-50%, -50%); 
background: lightgreen;
border: none; 
padding: 16px 32px;
}

In dem obigen Beispiel wird der Button mit position: absolute in der Mitte des Div-Elements platziert. Dies ist möglich, weil das Div-Element ein Elternteil des Buttons ist und der Button sich relativ zu seinem Elternteil positionieren kann.


Wenn Du position: relative auf ein anderes Element als das erste anwenden, wird es sich relativ zu seiner neuen Position bewegen. Zum Beispiel kann ein Div-Element, das sich am oberen Rand einer Seite befindet, mit position: relative nach unten verschoben werden.

In dem folgenden Beispiel wird ein Div-Element mit position: relative um 100 Pixel nach unten verschoben.

div { width: 400px; 
height: 400px; 
background: lightblue; 
position: relative; 
top: 100px;
 }

In dem obigen Beispiel wird das Div-Element 100 Pixel vom oberen Rand der Seite entfernt platziert. Dies ist möglich, weil das Div-Element sich relativ zu seiner neuen Position bewegt.
Du kannst auch andere Positionierungsattribute wie left, right, bottom und z-index verwenden, um ein Element zu positionieren.

CSS position : absolute

Die absolute Positionierung ist die flexibelste Art der Positionierung. Wenn Du ein Element absolut positionierst, wird es aus dem normalen Fluss des Dokuments entfernt und kann mit den Eigenschaften top, right, bottom und left an einer beliebigen Stelle platziert werden.

Ein absolut positioniertes Element ist immer relativ zum nächsten Element, das positioniert ist (normalerweise das Body-Element). Wenn kein Element positioniert ist, ist es relativ zum viewport, also dem Browserfenster.

Ein Element kann auch mit z-index angegeben werden, um die Reihenfolge der Elemente auf der z-Achse zu bestimmen. Standardmäßig liegt das erste Element auf der obersten Ebene, das zweite unter dem ersten und so weiter.

Absolute Positionierung ist häufig die beste Wahl, wenn Du ein Element an einer bestimmten Stelle platzieren möchtest, z.B. ein Pop-up-Fenster, das sich über den Inhalt des Dokuments legt. Beachte dabei, dass ein absolut positioniertes Element aus dem normalen Fluss des Dokuments entfernt wird. Das bedeutet, dass andere Elemente sich so verhalten, als ob das absolut positionierte Element nicht existiert.

Wenn Du also z.B. ein div-Element absolut positionierst und es unter einem anderen div-Element positionieren, wird das zweite div-Element sich so verhalten, als ob das erste div-Element nicht existiert und es an seine Stelle tritt.

CSS position : fixed

Mit CSS kannst Du verschiedene Arten von Elementen auf Deiner Webseite positionieren. Eine der verfügbaren Positionierungsmethoden ist „fixed“.

Mit dieser Methode kannst Du ein Element so positionieren, dass es immer an derselben Stelle bleibt, selbst wenn der Rest der Seite scrollt. Dies ist nützlich, wenn Du ein Element haben möchtest, das immer sichtbar ist, z.B. ein Menü, eine Schaltfläche oder ein Banner.

So positionierst Du ein Element mit der Methode „fixed“ : Zuerst musst Du das Element, das Du positionieren möchtest, mit einem CSS-Selektor auswählen. Dann kannst Du die Eigenschaft „position“ und den Wert „fixed“ verwenden, um das Element zu fixieren.

Du kannst auch die Eigenschaften „top“, „bottom“, „left“ und „right“ verwenden, um das Element genau an der gewünschten Stelle zu positionieren. Beachten, dass Du bei der Verwendung der Methode „fixed“ ein Parent-Element haben musst, das eine andere Positionierungsmethode verwendet, z.B. „relative“. Andernfalls wird das fixierte Element nicht an der gewünschten Stelle bleiben.

Hier ist ein Beispiel:

In diesem Beispiel wird ein Footer mit der Methode „fixed“ positioniert. Das Menü bleibt immer an derselben Stelle, selbst wenn der Rest der Seite scrollt. Um sicherzustellen, dass das Menü immer an der gewünschten Stelle bleibt, wird ein Parent-Element mit der Methode „relative“ positioniert.

body {   padding-bottom: 3em; } 
footer {   position: fixed; 
padding: .6em;   
bottom: 0;   
left: 0;   
right: 0; 
}

CSS position : sticky

CSS position: sticky ist ein Stil, der verwendet wird, um ein Element auf einer Webseite zu fixieren. Sobald ein Element seinen angegebenen Bereich erreicht, wird es an seinem angegebenen Ort fixiert.

Sobald ein Element fixiert ist, bleibt es an seinem Ort, auch wenn der Benutzer weiter den Rest der Webseite scrollt. Dieser Stil kann verwendet werden, um ein Element wie ein Menü oder ein Widget auf der Webseite fixiert zu halten, sodass es immer sichtbar ist, egal wie weit der Benutzer scrollt. Dies ist nützlich, damit Benutzer ein bestimmtes Element auf der Webseite leicht finden und aufrufen können.

Um CSS position: sticky zu verwenden, muss zuerst der Stil für das gewünschte Element in der CSS-Datei definiert werden. Dann wird das Attribut position auf den Wert sticky gesetzt. Zusätzlich muss angegeben werden, wo das Element fixiert werden soll. Dies kann mithilfe der Top-, Right-, Bottom- oder Left-Eigenschaften definiert werden.

Beispiel: In diesem Beispiel wird ein Menü auf der linken Seite der Webseite fixiert. Sobald der Benutzer den unteren Bereich des Menüs erreicht, wird das Menü an seinem Ort fixiert.

HTML Code:

<div class="menu"> 
<ul>
 <li><a href="#">Home</a>
</li> <li><a href="#">About</a>
</li> <li><a href="#">Contact</a>
</li> </ul> 
</div> 

CSS-Code:

.menu { position: sticky;
left: 0; 
}

Weitere Eigenschaften und Tipps zu CSS Position

Die Eigenschaft z-index legt fest, in welcher Reihenfolge die Elemente angezeigt werden. Elemente mit einem höheren z-index werden vor Elementen mit einem niedrigeren z-index angezeigt. Standardmäßig ist der z-index von Elementen 0.

Die folgende CSS-Deklaration positioniert ein Element absolut und legt den z-index auf 1:

position: absolute; z-index: 1;

Um das Verhalten von Elementen zu bestimmen, die mit dem Wert relative positioniert sind, wird die Eigenschaft top, bottom, left oder right verwendet. Diese Eigenschaften legen die Distanz des Elements zu seinem Parent-Element in Pixeln fest.

Die folgende CSS-Deklaration positioniert ein Element relativ und legt die Top-Distanz auf 10px:

position: relative; 
top: 10px;

Die Eigenschaft float wird verwendet, um Elemente nebeneinander anzuordnen. Dies ist häufig bei Bildern oder Boxen der Fall. Die folgende CSS-Deklaration sorgt dafür, dass zwei Bilder nebeneinander angezeigt werden:

img { float: left; 
} 

Die Eigenschaft clear sorgt dafür, dass ein Element unter einem anderen Element angezeigt wird. Dies ist häufig der Fall, wenn ein Element, das ein Bild enthält, unter einem anderen Bild angezeigt werden soll. Die folgende CSS-Deklaration sorgt dafür, dass ein Bild unter einem anderen Bild angezeigt wird:

img { clear: both; }

FAQ zu CSS Position

Was bedeutet CSS?

CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, mit welcher Du Formatierungen an HTML Dokumenten vornehmen kannst.

Welche Eigenschaften hat CSS position?

Mit CSS positon kannst Du die Attribute: static, relative, absolute, fixed und sticky bestimmen.

Ist der Wert sticky experimentell?

Nein der Wert ist nicht experimentell. Er wird überall supportet.