CSS position-Eigenschaft
Verwende die CSS-Eigenschaft position, um Elemente auf der Seite zu platzieren. Werte, Beispiele und zum Ausprobieren.
Die CSS-Eigenschaft position steuert, wie ein Element im Dokument platziert wird und wie es auf die Offset-Eigenschaften top, right, bottom und left reagiert. Sie ist eine der wichtigsten Eigenschaften zum Aufbau von geschichteten, fixierten oder schwebenden Interface-Elementen.
Diese Eigenschaft akzeptiert fünf Hauptwerte:
static— der Standardwert; das Element verbleibt im normalen Dokumentfluss.relative— das Element behält seinen Platz im Fluss, kann aber mit Offset-Eigenschaften verschoben werden.absolute— das Element wird aus dem Fluss herausgenommen und relativ zu seinem nächsten positionierten Vorfahren platziert.fixed— das Element wird aus dem Fluss herausgenommen und relativ zum viewport positioniert.sticky— das Element wechselt beim Scrollen zwischenrelativeundfixed.
Diese Seite erklärt, wann welcher Wert einzusetzen ist, welche Regeln für Offsets und containing blocks gelten und welche häufigen Fallstricke es gibt.
Wie Offsets und containing blocks funktionieren
Die Offset-Eigenschaften top, right, bottom und left wirken nur bei positionierten Elementen — d. h. bei jedem Element, dessen position nicht static ist. Bei einem static-Element werden sie ignoriert.
Wovon jeder Offset gemessen wird, hängt vom Wert ab:
relative— Offsets werden von der eigenen Normalposition des Elements gemessen.topundbottomverschieben es vertikal;leftundrighthorizontal. Der ursprünglich belegte Raum bleibt erhalten, sodass sich umgebende Inhalte nicht verschieben.absolute— Offsets werden von den Kanten des containing block gemessen: dem nächsten Vorfahren, der selbst positioniert ist (relative,absolute,fixedodersticky). Existiert kein solcher Vorfahre, beziehen sich die Offsets auf den initial containing block (grob das<html>-Element / die Seite).fixed— Offsets werden vom viewport gemessen, sodass das Element beim Scrollen der Seite an seiner Position bleibt.sticky— Offsets definieren einen Schwellenwert; das Element verhält sich wierelative, bis beim Scrollen dieser Schwellenwert überschritten wird, dann haftet es wiefixedinnerhalb seines Scroll-Containers.
Ein häufiger Fehler ist die Erwartung, dass ein
absolute-Kind sich an seinem Elternelement ausrichtet, ohneposition: relative(oder einen anderen nicht-statischen Wert) am Elternelement zu setzen. Das Hinzufügen vonposition: relativezum Elternelement — selbst ohne Offsets — macht es zum containing block. Dieses Muster „relatives Elternelement, absolutes Kindelement" ist die Grundlage der meisten positionierten Layouts.
| Anfangswert | static |
|---|---|
| Gilt für | Alle Elemente. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS2 |
| DOM-Syntax | Object.style.position = "sticky"; |
Syntax
CSS position-Syntax
position: static | absolute | fixed | relative | sticky | initial | inherit;Ein einfaches absolutes Beispiel
Hier hebt position: absolute den Absatz aus dem Fluss heraus und platziert ihn 40 px vom linken und 120 px vom oberen Rand der Seite entfernt (kein positionierter Vorfahre vorhanden, daher ist die Seite die Referenz):
CSS position-Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
position: absolute;
left: 40px;
top: 120px;
}
</style>
</head>
<body>
<h2>Position property example</h2>
<p>Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</body>
</html>Ergebnis
Beispiel der position-Eigenschaft mit allen Werten:
CSS position alle Werte Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#box1 {
position: static;
border: 2px solid #666;
width: 300px;
height: 100px;
}
#box2 {
position: absolute;
border: 2px solid #8ebf42;
top: 70px;
right: 15px;
}
#box3 {
position: relative;
border: 2px solid #666;
width: 300px;
height: 100px;
}
#box4 {
position: absolute;
border: 2px solid #8ebf42;
top: 70px;
right: 15px;
}
#box5 {
position: absolute;
border: 2px solid #666;
width: 320px;
height: 100px;
top: 750px;
right: 25px;
}
#box6 {
position: absolute;
border: 2px solid #8ebf42;
top: 70px;
right: 15px;
}
#box7 {
position: fixed;
border: 2px solid #8ebf42;
background-color: #eee;
width: 300px;
height: 100px;
bottom: 0;
left: 0;
right: 0;
}
#box8 {
position: absolute;
border: 2px solid #666;
top: 70px;
right: 15px;
}
</style>
</head>
<body>
<h2>Position property example</h2>
<h3>Position: static</h3>
<p>
The Box1 element remains in the natural flow of the page and does not act as anchor point for the absolutely positioned Box2 element:
</p>
<div id="box1">
Box1: position: static.
<div id="box2">Box2: position: absolute, right: 15px, top: 70px</div>
</div>
<h3>Position: relative</h3>
<p>
The Box3 element remains in the natural flow of the page and also acts as anchor point for the absolutely positioned Box4 element:
</p>
<div id="box3">
Box3: position: relative.
<div id="box4">Box4: position: absolute, right: 15px, top: 70px</div>
</div>
<h3>Position: absolute</h3>
<p>
The Box5 element does not remain in the natural flow of the page. It positions itself according to the closest positioned ancestor and also acts as anchor point for the absolutely positioned Box6 element:
</p>
<div id="box5">
Box5: position: absolute, top: 750px, right: 15px.
<div id="box6">Box6: position: absolute, right: 15px, top: 70px</div>
</div>
<h3>Position: fixed</h3>
<p>
The Box7 element does not remain in the natural flow of the page and positions itself according to the viewport and acts as anchor point for the absolutely positioned Box8 element:
</p>
<div id="box7">
Box7: position: fixed, bottom: 0, left: 0, right: 0.
<div id="box8">Box8: position: absolute, right: 15px, top: 70px</div>
</div>
</body>
</html>In diesem Beispiel bleiben box1 (static) und box3 (relative) im normalen Fluss, aber nur box3 fungiert als containing block für sein absolut positioniertes Kindelement, da relative es zu einem positionierten Vorfahren macht, während static dies nicht tut. box5 und box7 werden aus dem Fluss herausgenommen und relativ zur Seite bzw. zum viewport positioniert.
Sticky-Positionierung
Ein sticky-Element scrollt normal, bis es den angegebenen Offset erreicht (hier top: 1px), und „haftet" dann innerhalb seines Scroll-Containers an dieser Position. Es eignet sich ideal für Tabellenköpfe, Abschnittsbeschriftungen und Toolbars, die sichtbar bleiben sollen, solange ihr Abschnitt auf dem Bildschirm ist. Beachte, dass sticky-Positionierung nur funktioniert, während der scrollende Vorfahre des Elements gescrollt wird, und der Vorfahre darf kein overflow: hidden haben, das es abschneidet.
Beispiel der position-Eigenschaft mit dem Wert "sticky":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
height: 150px;
overflow: auto;
position: relative;
background-color: #cccccc;
padding: 0;
}
ul li {
list-style-type: none;
height: 30px;
padding: 10px 10px 0;
}
ul li:first-child {
position: -webkit-sticky;
position: sticky;
top: 1px;
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>Example of the position property with the "sticky" value:</h2>
<ul>
<li>Sticky List Item</li>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
<li>List Item 8</li>
<li>List Item 9</li>
</ul>
</body>
</html>Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| static | Elemente werden gemäß dem normalen Dokumentfluss platziert. Dies ist der Standardwert dieser Eigenschaft. | Ausprobieren » |
| absolute | Elemente werden aus dem Dokumentfluss herausgenommen und relativ zu ihrem positionierten Vorfahren-Element platziert. | Ausprobieren » |
| fixed | Elemente werden aus dem Dokumentfluss herausgenommen und relativ zum Browser-Fenster positioniert. | Ausprobieren » |
| relative | Das Element wird relativ zu seiner normalen Position platziert; die Offset-Eigenschaften verschieben es, ohne seinen ursprünglichen Platz zu entfernen. | Ausprobieren » |
| sticky | Elemente werden gemäß dem normalen Dokumentfluss positioniert und dann relativ zu ihrem nächsten scrollenden Vorfahren und containing block versetzt. | |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Wann welchen Wert verwenden
static— für normalen Dokumentinhalt so belassen. Man setztstaticexplizit selten, außer um eine Positionierungsregel zurückzusetzen.relative— für kleine visuelle Verschiebungen oder, am häufigsten, um ein Element zum containing block für einabsolute-Kindelement zu machen, ohne es aus dem Fluss zu entfernen.absolute— für Overlays, Badges, Tooltips und Dropdowns, die präzise innerhalb einesrelative-Elternelements platziert werden sollen.fixed— für Elemente, die am viewport fixiert sind: Sticky-Header, die sich nie bewegen, „Nach oben"-Schaltflächen, Cookie-Banner und Modals.sticky— für Header oder Beschriftungen, die bis zu einem bestimmten Punkt mit dem Inhalt scrollen und dann sichtbar bleiben sollen.
Wenn sich positionierte Elemente überlappen, wird ihre Vorder-zu-Hinter-Reihenfolge durch die Eigenschaft z-index gesteuert. Positionierung wird beim Aufbau von Layouts auch häufig mit float, display und overflow kombiniert.