CSS/Tutorials/Ausrichtung/position

15min

einfach

Grundkenntnisse in

• HTML
• CSS

Mit der Eigenschaft position lässt sich festlegen, wie ein Element positioniert wird. Je nach Wert bleibt es im normalen Dokumentfluss oder wird daraus entfernt und relativ zu einem Bezugspunkt ausgerichtet.

position: static

position:static ist der Defaultwert der Eigenschaft position. Das Element verbleibt im Dokumentfluss. Die Eigenschaften top, bottom, left, right werden ignoriert.

position: relative

Mit position: relative kann ein Element relativ zu seiner ursprünglichen Position verschoben werden.
Die Inset-Eigenschaften top, bottom, left und right legen den Versatz fest. Der ursprüngliche Platz des Elements im Dokumentfluss bleibt dabei erhalten.

relative Positionierung und Verschiebung ansehen …

a { 
  position: relative; 
  top: -.9em; 
  left: -1.2em; 
}

In diesem Beispiel wird der Link nur optisch verschoben. Der ursprüngliche Platz bleibt erhalten, deshalb kann der Link über der Überschrift liegen. Für Abstände innerhalb eines Elements sollte man stattdessen meist mit padding oder margin arbeiten.

Beachte: position: relative wird häufig als Bezugspunkt für absolut positionierte Elemente verwendet. Eine reine Verschiebung mit top, left usw. ist dagegen eher selten nötig.

position: absolute

Mit position:absolute wird ein Element aus dem normalen Dokumentfluss entfernt. Es nimmt keinen Platz mehr ein und wird relativ zu einem Bezugselement positioniert. Die Position wird mit den Inset-Eigenschaften left, right, top und bottom festgelegt.

Da das Element keinen Platz im Dokumentfluss mehr beansprucht, beeinflusst es die Größe seiner Umgebung nicht. Das Elternelement passt sich deshalb nicht automatisch an die Größe des absolut positionierten Elements an.

Beachte: Absolute Positionierung eignet sich gut für einzelne überlagernde Elemente wie Symbole, Badges oder Hinweise. Für die Anordnung kompletter Seitenlayouts sind heute Flexbox und Grid die geeigneteren Werkzeuge.

Es soll eine kleine Hinweis-Markierung (Badge) auf einem Element dargestellt werden, ohne den übrigen Inhalt zu verschieben.

Badge über einer Karte ansehen …

.karte {
  position: relative;
}

.badge {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
}

Das übergeordnete Element .karte dient als Bezugspunkt und erhält position: relative.
Das Badge wird mit position: absolute aus dem Dokumentfluss entfernt.
Die genaue Position wird mit Inset-Eigenschaften wie top und right festgelegt.

absolute Positionierung eines Tooltipps

Auch ein Tooltip, eine Sprechblase mit Erläuterungen, soll an der jeweils passenden Stelle außerhalb des Elementflusses eingeblendet werden.

Tooltip ansehen …

.tooltip {
  position: relative;
}

.tooltip [role="tooltip"] {
  position: absolute;
  bottom: 100%;
  left: 50%;
  visibility: hidden;
  opacity: 0;
}

.tooltip:hover [role="tooltip"],
.tooltip:focus-within [role="tooltip"] {
  visibility: visible;
  opacity: 1;
}

Die im span enthaltene Erklärung erhält keine Klasse, sondern wird über ihren Attributwert [rel=tooltip] angesprochen. Normal wird sie nicht dargestellt (visibility:hidden und opacity:0).

Bei :hover werden Deckkraft und Sichtbarkeit geändert. Der Tooltipp wird mit position: absolute oberhalb des Begriffs über das schon Gelesene platziert.

Beachte, dass du dem Elternelement ein position: relative geben musst.
Andernfalls wäre der Bezugspunkt das html-Element.

→ Infobox/Tooltips mit title

Beachte: Die hier gezeigte Lösung dient vor allem dazu, die Funktionsweise von position: absolute zu erläutern. Für echte Tooltips und Popovers stehen heute mit dem Popover API und anchor positioning moderne Webplattform-Funktionen zur Verfügung. Sie erleichtern die Positionierung, berücksichtigen den verfügbaren Platz und sind für interaktive Oberflächenelemente häufig die bessere Wahl.

• 

  Tooltips mit Popover
  • Popover API
  • Anchor Positioning

  
  Popups ohne Programmieren!

   

Pseudoelemente vor Links

Schon im Einstieg in CSS-Kurs gab es ein Beispiel, in dem Links durch Pseudoelemente ergänzt wurden. Diese Pseudoelemente sollen sich nie verschieben, sondern immer neben dem Bezugspunkt positioniert werden.

Pseudoelemente als Aufzählungszeichen ansehen …

a {
  padding: 0 1em;
  position: relative;
}

a::before {
	content: '';
	width: 0;
	height: 0;
	font-size: 0;
	border: 10px solid transparent;
	border-left-width: 15px;
	border-left-color: steelBlue;
	position: absolute;
	top: 0;
	left: 0;
}

Das a-Element wird mit position: relative zum Bezugspunkt; das absolut positionierte Pseudoelement an den linken, oberen Rand positioniert.

Es mag verwirren, das Höhe und Breite 0 betragen. Der 10px breite Rand ist transparent – nur dem linken Rand wird durch border-left-color: currentColor; mit dem Farbwert currentColor die aktuelle Textfarbe zugewiesen.

→ Selektoren in CSS/Pseudoelemente

position: fixed

Möchte man ein Element starr am Viewport ausrichten, (beispielsweise eine fixe Fußzeile oder einen Link zum Seitenanfang in einer Ecke) dann ist position: fixed das Mittel der Wahl. Genau wie bei position: absolute wird das Element aus dem Textfluss entnommen, es entsteht also keine Lücke. Positioniert wird klassisch mit den CSS-Eigenschaften top, bottom, left und right.

Toplink - immer sichtbar! ansehen …

#toplink { 
  position: fixed; 
  right: 1rem;
  bottom: 1rem;
}

Feststehender Footer

Ein feststehender Footer ist ein Footer, der am unteren Bildrand feststeht und damit immer zu sehen ist, unabhängig davon, wie die Seite gescrollt wird.

Dieses Beispiel arbeitet mit position mit dem Wert fixed.

Als Grundstruktur verwenden wir unsere Webseite mit einem einfachen Footer aus dem HTML5-Tutorial in der letzten Version eines Holy-Grail-Layouts:

Seite mit feststehendem footer ansehen …

body {
  padding-bottom: 3em;
}

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

Mittels position: fixed wird das footer-Element als feststehendes Element definiert, mittels bottom: 0; wird es genau auf der Unterkante des Darstellungsbereiches, also ganz unten, positioniert.

Beachte, dass man für den body-Bereich noch einen unteren Innen- oder Außenabstand definiert, da sonst die Fußzeile den unteren Bereich des Elements überdeckt!

Unschön an diesem Beispiel ist, dass der Kontakt-Link und das Copyright bei großen Viewports außerhalb des eigentlichen Satzspiegels ist. Dies wird im nächsten Beispiel gelöst.

Empfehlung: Anstelle der hier vorgestellten Positionierung mit position: fixed; kann man den gleichen Effekt auch mit

• position:sticky
• „Sticky Footer“ mit Grid Layout
• einer Fixierung mit Flexbox

erreichen.

position: sticky

Browserunterstützung
caniuse.com

Mit position: sticky bleibt ein Element beim Scrollen sichtbar, sobald es eine bestimmte Position erreicht hat.

• Das Element bleibt zuerst ganz normal im Seitenfluss.
  Die übrigen Elemente behalten ihre Position auch nach einer Verschiebung.
• Beim Scrollen bewegt es sich zunächst mit dem Inhalt.
• Sobald es den angegebenen Abstand zum Rand erreicht (z. B. top: 0), bleibt es an dieser Position kleben.
• Anders als bei position: fixed bleibt es dem Layout zugeordnet und nimmt weiterhin Platz ein.

„sticky“ header und footer ansehen …

header {
	position:sticky;
	top:   0;
	left:  0;
	right: 0;
}

nav {
	position: sticky;
	top: 10em;
}			
footer {
	position: sticky;
	bottom: 0;
	left:   0;
	right:  0;
}

Im Beispiel werden Header, Navigation und Footer mit position: sticky so an den oberen bzw. unteren Rand „geklebt“, dass sie immer sichtbar sind.

sticky ist wie ein Element mit relative, das beim Erreichen einer Grenze vorübergehend festgehalten wird.

Beachte: Ein sticky Header kann dazu führen, dass fokussierte Elemente oder Ziele von seiteninternen Links durch den Header verdeckt werden.

Mit scroll-padding-top lässt sich der notwendige Abstand beim Scrollen berücksichtigen – vorzuugsweise wenn man die Höhe des Headers und den Scroll-Padding mit einer Custom Property setzt.
Bei dynamisch wechselnder Headerhöhe kann die benötigte Größe mit JavaScript (z. B. über ResizeObserver) ermittelt und als CSS-Variable bereitgestellt werden.

---

Auch bei langen Listen kann die Überschrift immer im Blick gehalten werden:

„sticky“ Überschrift bei langen Listen ansehen …

h2 {
  position: sticky;
  top: -1px;
  background: #337599;
  border-bottom: thin solid #113;
  border-top: thin solid #113;
  color: #fff;
  margin: 0;
  padding: 2px 0 0 12px;
}

---

Empfehlung: Hebe bei kleinen Viewports position: sticky wieder auf.

Beispiel

@media all and (max-width: 35em) {
  #sticky {
    position: static;
  }
}

Siehe auch

• 

  Gestaltung mit CSS
  • Zebrastreifen
  • Zeilenüberschriften
  • Tabelle mit festem Kopf (position:sticky)
   
• 

  OnePager

  (Single-Page Webseite mit Scroll)

  • Komfort-Version
  • interactive Storytelling
   

Beachte: position: sticky bezieht sich immer auf den nächsten übergeordneten Scrollcontainer. Befindet sich ein Sticky-Element in einem verschachtelten Container mit eigenem Scrollbereich, bleibt es nur innerhalb dieses Containers sichtbar. Wird der gesamte Container aus dem Viewport gescrollt, verschwindet auch das Sticky-Element.
Bei mehreren Sticky-Elementen in verschachtelten Scrollcontainern kann es notwendig sein, mit z-index die gewünschte Stapelreihenfolge festzulegen.

Inset-Eigenschaften

Die Eigenschaften

• top,
• left,
• bottom und
• right

werden als physische Inset-Eigenschaften (inset: Einsatz, Anschlag; hier aber eher Einrückung oder Versatz) bezeichnet. Sie beziehen sich immer auf die physische Ober-, Unter-, Links- oder Rechtsseite des Bezugsrahmens.

Für Webseiten mit unterschiedlichen Schreibrichtungen stehen die entsprechenden logischen Inset-Eigenschaften zur Verfügung. Diese orientieren sich an der Block- und Inline-Richtung des Dokuments und passen sich automatisch an die Schreibrichtung an.

• inset-block-start,
• inset-inline-start,
• inset-block-end und
• inset-inline-end

Die Wirkung dieser Inset-Eigenschaften hängt vom gewählten position-Wert ab.

position	Dokumentfluss	Bezugspunkt der Inset-Eigenschaften
static	bleibt im Dokumentfluss	keine Wirkung
relative	bleibt im Dokumentfluss	ursprüngliche Position des Elements
absolute	wird aus dem Dokumentfluss entfernt	nächster positionierter Vorfahre
fixed	wird aus dem Dokumentfluss entfernt	Viewport
sticky	bleibt im Dokumentfluss	nächster Scrollcontainer

Absolute Positionierung mit inset-inline

In CSS benutzt man oft top: 0 und left: 0, um ein Element oben links zu platzieren. Das funktioniert gut, solange die Seite von links nach rechts geschrieben wird (wie Deutsch oder Englisch).

In Sprachen mit anderer Schreibrichtung wie Arabisch ist „links“ oder „oben“ nicht mehr die richtige Position.

Stattdessen solltest du logische CSS-Eigenschaften verwenden:

• inset-inline-start statt left
• inset-inline-end statt right
• inset-block-start statt top
• inset-block-end statt bottom

Diese passen sich automatisch an die Schreibrichtung an.

Absolute Positionierung mit inset-inline ansehen …

    .box {
      position: relative;
      margin-block-end: 1em;
    }

    .badge {
      position: absolute;
      inset-block-start: 0;
      inset-inline-end: 0;
      background: red;
      color: white;
    }

    .message {
      position: relative;
    }

    .timestamp {
      position: absolute;
      inset-inline-end: 0.5em;
      inset-block-end: 0.5em;
    }

Die absolute Positionierung der Badge und des Timestamps erscheinen automatisch in der jeweils richtigen Ecke – unabhängig von der Schreibrichtung der Seite.

• display
• Ausrichtung mit CSS
  (Übersicht)
• Textumfluss mit float und clear

Weblinks

• thestyleworks.de: Zusammenspiel von display, position und float