CSS/Tutorials/Ausrichtung/position

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Elemente können durch Verwendung der Eigenschaft position aus dem normalen Elementfluss entfernt werden und an jede beliebige Stelle des Viewports positioniert werden. Auf andere Elemente haben positionierte Elemente keinen Einfluss.

Folgende Werte sind möglich:

  • static: (Standardwert) Das Element verbleibt im Textfluss.
    top, bottom, left, right werden ignoriert.
  • relative: Das Element kann mit top, bottom, left, right verschoben werden;
    • es bleibt aber eine Lücke im Textfluss
    • aktiviert den z-index, gibt einen Positionierungskontext
  • absolute: Das Element wird aus dem Elementfluss genommen und kann mit top/right/bottom/left völlig unabhängig auf dem Bildschirm positioniert werden.
  • fixed: wie absolute, aber scrolling der Seite bewegt das Element nicht
  • sticky: wie fixed, aber es wird erst fest, wenn die Seite zu einem bestimmten, festgelegten Punkt gescrollt wird.
Hinweis:
Dabei muss aber noch einmal betont werden: Die Browser stellen alle Elemente innerhalb des Elementflusses nacheinander so dar, dass alle Inhalte sichtbar sind.
Webseiten ohne Festlegung von display und position sind bereits responsiv und zugänglich!

position: static

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


position: relative

Mit position:relative kann man das Element mit top, bottom, left und right ausrichten. Die Lücke im Textfluss bleibt bestehen.


relative Positionierung und Verschiebung ansehen …
a { 
  position: relative; 
  top: -.9em; 
  left: -1.2em; 
}

Öffnen Sie dieses Beispiel im Frickl mit "Ausprobieren" und erhöhen Sie den top-Wert auf -3em. Wie Sie sehen, verdeckt der Link die Überschrift.

Falls Sie den Link wirklich nach oben schieben wollen, bietet sich hier wie oben display: inline-block und ein padding-bottom an.

Beachten Sie: Im Allgemeinen ist es nicht nötig, die position-Eigenschaft zu setzen.

position: absolute

Mit position:absolute kann man Elemente losgelöst vom Textfluss positionieren, an eine Stelle, die per left, right, top und bottom festgelegt wird. Eine Lücke bleibt dabei nicht bestehen. Größenangaben, wie width und height, oder Abstände, wie margin und padding, sind ebenfalls möglich.


Beachten Sie:

Bei absoluter Positionierung wird man mit einem Nachteil konfrontiert: Die Größe des Elternelementes passt sich nicht mehr an die Größe des Kindelements an.

Verwenden Sie absolute Positionierung deshalb nur in begründeten Ausnahmefällen!

absolute Positionierung einer Navigation

Möchte man eine Navigation bauen, in der sich die Untermenüs an der Hauptnavigation ausrichten, könnte man den Navigationspunkten der Hauptnavigation die Eigenschaft position: relative geben und hätte damit den Bezugspunkt für die jeweiligen Kind-Elemente geschaffen. Im Beispiel ist das einzige Kind-Element eine weitere Liste, die – dank absoluter Positionierung – aus dem Textfluss herausgenommen wird. Fährt man nun mit der Maus über einen Hauptlistenpunkt erscheint das Untermenü.

Beispiel ansehen …
nav > ul > li {
  position: relative;
  display: inline-block; 
  padding: .6em;
  background-color: #FEA;
  width: 6em;
}
nav > ul > li > ul {
  position: absolute;
  list-style-type: none;
  margin: 0; 
  padding: .6em;
  background-color: #AEF;
  top: 2.5em; 
  left: 0;
  width: 6em;
  display: none;
}

Die Angaben left, right, top und bottom beziehen sich dabei auf das nächste Vorfahrenelement, welches mit position positioniert wurde. Hat das Element keine solchen Vorfahrenelemente, wird als Bezugspunkt das Wurzelelement angesehen – in HTML-Dokumenten also das HTML-Element (bei XML wäre es das XML-Element).

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 span[role=tooltip] {
  display: none;
}

.tooltip:hover span[role=tooltip] {
  display: block;  
  position: absolute; 
  bottom: 2em;
  left: -6em;
  width: 15em;
  z-index: 100;
}
Die im span enthaltene Erklärung erhält keine Klasse, sondern wird über ihren Attributwert [rel=tooltip] angesprochen. Normal wird sie nicht dargestellt (display:none).
Bei :hover wird der Wert auf display: block geändert. Dieses Blockelement wird mit position: absolute oberhalb des Begriffs über das schon Gelesene platziert.
Beachten Sie, dass Sie dem Elternelement ein position: relative geben müssen.
Hauptartikel: CSS/Tutorials/Tooltips mit CSS

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: '';
  position: absolute;
  top: 3px;
  left: 0;
  width: 0;
  height: 0;
  font-size: 0;
  border: 8px solid transparent;
  border-left-color: currentColor;

}

Das a-Element wird mit position: relative zum Bezugspunkt; das absolut positionierte Pseudoelement an den linken Rand um 3px nach oben positioniert.

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

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.

Beispiel ansehen …
#toplink { 
  position: fixed; 
  bottom: 0; 
  right: 0; 
}

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.

Beachten Sie, dass Sie für den body-Bereich noch einen unteren Innen- oder Außenabstand definieren, 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; können Sie den gleichen Effekt auch mit erreichen.

position: sticky

position: sticky: Elemente mit dieser Eigenschaft behalten ihre Position im Elementfluss, bis sie das obere oder untere Seitenende erreichen und dort „kleben“ bleiben. Erforderlich ist dafür auch die Angabe von top oder bottom – der zugewiesene Wert ist der Abstand vom Seitenende, bei dem das Element „kleben“ bleiben soll.

Browserunterstützung
caniuse.com

Mittlerweile wird position: sticky von allen modernen Browsern unterstützt!

„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.


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

„sticky“ Überschrift 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: Heben Sie bei kleinen Viewports position: sticky wieder auf.
Beispiel
@media all and (max-width: 35em) {
  #sticky {
    position: static;
  }
}
Beachten Sie: Firefox, Chrome und Opera haben einen Bug, der es in Firefox verhindert Tabellenelemente zu fixieren. In Chrome und Opera beschränkt sich der Bug auf thead und tr.

Siehe auch


Weblinks