relativeMeister.com
HTML-Elemente positionieren mit CSS position
Lerne, wie du mit CSS position HTML-Elemente frei in deiner Website positionieren kannst, und wie du die einzelnen Möglichkeiten anwendest.Tags: CSS lernen | CSS-Befehle | Formatierung | HTML lernen | Positionierung | scrollen | Web-Development lernen | Webseiten erstellen lernen | Website-LayoutWorum geht´s?
Der position-Befehl in CSS war vor dem Aufkommen von Flexboxen und dem Grid-Layout die Möglichkeit, um eine Webseite genau so aufzubauen, wie man sie haben will. Aber auch heute noch ist es wichtig, CSS position richtig anwenden zu können.
1. Was ist CSS Positionierung?
Ein jedes HTML-Element hat einen Wert für position schon voreingestellt, ohne dass du etwas dafür tun musst. Dieser voreingestellte Wert nennt sich „static“.
Es gibt aber noch weitere Möglichkeiten, wie du den Wert für position setzen kannst. Hier eine kleine Liste:
- static
- relative
- absolute
- fixed
- sticky
Egal, welchen Wert du für die Positionierung des HTML-Elements im CSS wählst, das Prinzip ist immer gleich.
Nehmen wir an, wir haben eine HTML-Seite mit etwas Text und einem DIV:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
Das ist ein Text vor dem DIV
<div id="positionVorzeiger">
Ich bin positioniert
</div>
Das ist der Text nach dem DIV
</body>
</html>Dann könnten wir das DIV mit CSS die position static geben:
#positionVorzeiger {
position: static;
background-color: orange;
width: 500px;
height: 300px;
}(Die Hintergrundfarbe, Breite und Höhe ist nur gesetzt, damit man das DIV auch gut sehen kann).
Willst du das Element auf „relative“ setzen, so schreibst du statt „static“ eben „relative.
Schauen wir uns mal alle diese Möglichkeiten an, und was sie bewirken:
1.1 Die CSS position static
Wie schon eingangs erwähnt, ist das die Voreinstellung, wenn man die Positionierung des HTML-Elements nicht über CSS-Befehle verändert.
Dies bedeutet, dass das HTML-Element Raum einnimmt, und auch andere Elemente je nach Platzbedarf verschiebt.
Es ist einfach da, wo es eben im HTML-Code vorkommt:
Im Textverarbeitungsprogramm Word würde das z.B. einfachem Text entsprechen, oder einem Bild, das man einfach in den Text einfügt. Je nachdem wo das Bild eingefügt wurde, gibt es Text davor und danach.
1.2 Die CSS position relative
Geben wir dem HTML-Element die position relative, verändert sich auf den ersten Blick nicht viel. Das Element bleibt an der selben Stelle:
Was wir aber jetzt zusätzlich tun können, ist das HTML-Element ausgehend von der Stelle, an der es normalerweise ist, verschieben.
Je nachdem, von welcher Richtung aus wir es verschieben wollen, gibt es dafür 4 CSS-Befehle:
- top
- bottom
- left
- right
Wenn wir unser DIV um 10px nach oben verschieben wollen, so können wir das damit machen:
#positionVorzeiger {
position: relative;
bottom: 10px;
background-color: orange;
width: 500px;
height: 300px;
}Unser DIV hat sich nun um 10 Pixel nach oben verschoben, und verdeckt den Text von vorher:
1.3 Die CSS position absolute
Um die CSS position absolute und vor allem den Unterschied zur CSS position relative zu demonstrieren, brauchen wir weitere DIVs in unserem HTML-Code:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
Das ist ein Text vor dem DIV
<div id="positionVorzeiger">
Ich bin positioniert
<div id="innerDiv">
Inneres DIV
</div>
</div>
Das ist der Text nach dem DIV
</body>
</html>Das innere DIV setzen wir auf eine rote Farbe und geben ihr auch die Positon relative. Außerdem geben wir ihm noch eine Verschiebung von unten um 10px mit:
#innerDiv {
position: relative;
bottom: 10px;
background-color: red;
width: 50px;
height: 50px;
}Das Ergebnis sieht ähnlich aus wie vorher – das rote DIV ist vor dem Text aus dem orangen DIV nach oben geschoben worden:
1.3.1 Wie wir mit position absolute unser DIV verschieben können
Nun ändern wir von unserem roten inneren DIV die position auf absolute. Was passiert nun?
Wenn wir die CSS position absolute verwenden, dann behandelt der Browser unsere 4 Richtungs-Befehle top, bottom, left und right ähnlich wie in einem Koordinaten-System.
Diese Koordinaten-System basiert auf dem ersten Eltern-Element in der Hierarchie, das nicht static (also z.B. relative oder absolute) ist. Wird keines gefunden, ist die Basis das <body>-Tag.
Anders ausgedrückt: Unser oranges DIV hat seine Ränder, wo es aufhört. Wenn das rote DIV position: absolute hat und z.B. ein „left: 50px;“, dann findet sich das rote DIV 50 Pixel vom linken Rand weg. Hat es zusätzlich ein „bottom: 100px;“, dann befindet es sich 100 Pixel vom unteren Rand des orangen DIVs weg.
1.3.2 Achtung: CSS position absolute führt zum Verlust der Räumlichkeit
Wenn du einem HTML-Element die position absolute gibst, hört es auf, andere Elemente wegzuschieben.
Das ist ähnlich, wie wenn du im Textverarbeitungsprogramm Word den Textfluss eines Bildes auf „vor dem Text“ bzw. „hinter dem Text“ stellst.
Das Gleiche gilt übrigens auch für die CSS position fixed und sticky.
1.3.3 Vorne und hinten der HTML-Elemente festlegen mit z-index
Wenn sich Elemente nun übereinander schieben und überlappen können – wie weiß der Browser, welche Elemente er ganz oben anzeigen soll?
Da kommt nun der CSS-Befehl z-index ins Spiel:
#innerDiv {
position: absolute;
bottom: 10px;
z-index: 999;
background-color: red;
width: 50px;
height: 50px;
}Mit dem CSS-Befehl z-index kannst du eine Nummer vergeben.
Der Browser sieht sich für jedes HTML-Element, das sich mit einem anderen überlappt, an, welche z-index-Einstellungen die HTML-Elemente haben.
Das HTML-Element mit dem höheren z-index wird vor dem mit dem niedrigeren z-index angezeigt.
Umgekehrt kannst du auch HTML-Elemente in den Hintergrund treten lassen, in dem du ihnen z.B. eine Minuszahl wie -1 als z-index mitgibst.
1.4 Die CSS position fixed
Die CSS position fixed funktioniert nicht unähnlich der CSS position absolute. Auch hier brauchen wir manchmal einen z-index, und auch hier verschiebt das HTML-Element andere HTML-Elemente nicht mehr, weil es seinen Raum nicht mehr „ausfüllt“.
Der große Unterschied ist der, dass sich ein HTML-Element mit der CSS position fixed nicht mehr an einem Eltern-Element orientiert, sondern am Browserfenster selbst.
Das hat den großen Vorteil, dass man so z.B. ein seitliches Menü anlegen kann, dass auch dann an der selben Stelle bleibt, wenn der Website-Besucher scrollt.
1.5 Die CSS position sticky
Seit einiger Zeit gibt es noch eine weitere interessante Positionierungs-Möglichkeit, nämlich „sticky“.
Die CSS position sticky ist gewissermaßen eine Art Mischung aus relative und fixed, die je nachdem ob der User gescrollt hat wechselt.
Versuch z.B. mal, was passiert, wenn du den CSS-Code so abänderst:
#positionVorzeiger {
position: relative;
bottom: 10px;
background-color: orange;
width: 3500px;
height: 2000px;
}
#innerDiv {
position: sticky;
top: 0px;
left: 0px;
z-index: 999;
background-color: red;
width: 50px;
height: 50px;
}Wenn du nun nach rechts bzw. nach unten scrollst, bleibt das rote DIV am Rand „stecken“. Eben sticky.
2. Wofür die CSS Positionierung brauchst
Auch wenn die meisten Websites heute weniger wie früher auf CSS positioning angewiesen sind, ist die Positionierung von HTML-Elementen mit CSS immer noch eine der Grundlagen in der Web-Programmierung.
Und wenn es nur darum geht, ein Menü auch beim Scrollen an der richtigen Position zu halten. Eine weiter Standard-Nutzung ist z.B. das Erzeugen von Dropdown-Menüs. Viel davon kann man z.B. auch mit Flexboxen lösen, aber eben nicht alles.
Daher kann es Sinn machen, dir eine HTML-Seite mit 2-4 DIVs anzulegen und einfach mal eine halbe Stunde damit zu verbringen, all die Kombinationen selbst auszuprobieren.
Meistens dauert es ein wenig, bis man z.B. verinnerlicht hat, dass die CSS position absolute und fixed nur dann auf Eltern-Elemente reagieren, wenn diese nicht die position static haben.
Die Zeit, die du hier investierst, ist eine sehr sinnvoll genutzte Zeit.