CSS/Tutorials/Ausrichtung/position
Inhaltsverzeichnis
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.page is scrolled past your set threshold
Hinweis
Webseiten ohne Festlegung von
display
und position
sind bereits responsiv und zugänglich!position: static[Bearbeiten]
position:static
ist der Defaultwert der Eigenschaft position
. Das Element verbleibt im Textfluss. Die Eigenschaften top, bottom, left, right werden ignoriert.
position: relative[Bearbeiten]
Mit position:relative
kann man das Element mit top, bottom, left und right ausrichten. Die Lücke im Textfluss bleibt bestehen.
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.
position: absolute[Bearbeiten]
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.
[Bearbeiten]
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ü.
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[Bearbeiten]
Auch ein Tooltip, eine Sprechblase mit Erläuterungen, soll an der jeweils passenden Stelle außerhalb des Elementflusses eingeblendet werden.
.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;
}
Pseudoelemente vor Links[Bearbeiten]
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.
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 Pseudoelemet 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[Bearbeiten]
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 {
position: fixed;
bottom: 0;
right: 0;
}
[Bearbeiten]
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 CSS/Tutorials/mehrspaltigen Layouts:
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.
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.
Feststehende Kopf- und Fußzeile[Bearbeiten]
Wenn Sie nun vielleicht noch gerne eine feste Kopfzeile definieren möchten, damit die Seite sowohl nach oben als auch nach unten hin stetig „abgeschlossen“ ist, lässt sich das auf die gleiche Art und Weise realisieren wie der Footer. Um bei der obigen HTML-Struktur zu bleiben, muss man das header-Element lediglich aus dem body herausnehmen und davor setzen. Folgende CSS-Deklarationen werden ferner benötigt:
body {
padding: 7em 0 3em;
}
body,
.wrapper {
margin: 10px auto;
max-width: 60em;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
}
footer {
position: fixed;
padding: 10px;
bottom: 0;
left: 0;
right: 0;
}
<header>
<div class="wrapper">
<img src="Logo.svg" alt="logo">
<h1>Titel</h1>
</div>
</header>
Die Funktionsweise ist beinahe identisch mit dem vorhergegangen Beispiel – lediglich der Body bekommt einen der Höhe des Header angepassten Innenabstand.
Damit die Inhalte von Header und Footer zentriert werden, wird hier noch ein zusätzliches div mit der gleichen Breite und Zentrierung wie der Body eingefügt.
Anstelle der hier vorgestellten Positionierung mit position: fixed;
können Sie den gleichen Effekt auch mit
position: sticky[Bearbeiten]
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.
Details: caniuse.com
position: sticky
wieder auf.
@media all and (max-width: 35em) {
#sticky {
position: static;
}
}
thead
und tr
.Achtung!
-webkit-position
verwenden.
Details: caniuse.com
Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.
Weblinks[Bearbeiten]
- Matthias Apsel: position richtig verwenden
- thestyleworks.de: Zusammenspiel von display, position und float
- maddesigns.de: CSS3 – position: sticky
- thenewcode.com: scroll to top then fixed
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 aufdisplay: block
geändert. Dieses Blockelement wird mitposition: absolute
oberhalb des Begriffs über das schon Gelesene platziert.position: relative
geben müssen.