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.
Inhalt
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
CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, mit welcher Du Formatierungen an HTML Dokumenten vornehmen kannst.
Mit CSS positon kannst Du die Attribute: static, relative, absolute, fixed und sticky bestimmen.
Nein der Wert ist nicht experimentell. Er wird überall supportet.