Positionierungstyp und Versetzung
CSS Eigenschaften: position sowie top, right, bottom, left
Gehe zu: Beschreibung | Demonstration | Beispiele: relative, absolute
Beschreibung
Mit den CSS-Eigenschaften position, sowie top, right,
bottom und left kann man HTML-Elemente im Browser an eine
andere Stellen platzieren.
Die CSS-Eigenschaft position (Positionierungstyp) gibt an, wie
die Art der Positionierung ist. Sie kann die Werte
static, relative, absolute,
fixed und das allgemeine inherit annehmen. Wie die
einzelnen Werte funktionieren wird weiter unten gezeigt.
Die CSS-Eigenschaften (top,
right, bottom, left) geben den Abstand an den jeweiligen Seiten an. Damit wird angegeben von welcher
Seite aus das Elememt versetzt wird und um wieviel. Eine
Deklaration left: 50px; gibt z.B. an, dass das Element von
links aus um 50 Pixel versetzt werden soll - es "bewegt" sich also nach
rechts.
Demonstration
Der folgende Bereich stellt das Fenster eines Browsers dar. Dies ist
notwendig um den Wert fixed
auf kleinem Raum demonstrieren zu können. Weil für die Demonstration das Fenster gescrollt werden muss, befindet sich
ober- und unterhalb der Listen noch Text. Dieser ist nur ein Platzhalter, sein Inhalt
ist völlig egal.
Zu sehen sind vier Listen, die sich nebeneinander befinden. Alle sind gleich aufgebaut: Sie enthalten jeweils vier Listenelemente, die mit eins bis vier durchnummeriert sind.
<ul> <li>eins</li> <li class="versetzt">zwei</li> <li>drei</li> <li>vier</li> </ul>
Das jeweils zweite Listenelement enthält eine Besonderheit: Mittels einer
Klasse wird ihm ein
Wert für den Positionierungstyp (position)
zugewiesen, sowie Werte für die Versetzung (top, right, bottom, left).
.versetzt {
position: …
top: 20px;
right: 20px;
}
Der Unterschied zwischen den einzelnen Listen ist, dass dem jeweils zweiten Listenelement ein anderer Wert
für den Positionierungstyp (position) zugewiesen ist. Bei der ersten Liste der Wert
static, bei der zweiten der Wert relative, bei der dritten der Wert
absolute und bei der
vierten der Wert fixed. Um dies in der Darstellung der
Demonstration besser zu erkennen, ist
der Name des jeweiligen Wertes vor den
Listeneinträgen dazugeschrieben (also z.B. "static eins").
Allen gemeinsam ist jedoch, dass die Versetzung gleich ist. Das zweite Listenelement
soll, ausgehend von der Position welche durch den Positionierungstyp
angegeben wird, von oben (top) 20 Pixel und von rechts (right) auch
20 Pixel Abstand
bekommen, also nach unten und links versetzt werden.
Auswirkungen
- Bei static (erste Liste von links) passiert nichts und das Element bleibt aus seinem Platz.
- Bei relative (zweite Liste von links) wird das Element von dort aus versetzt, wo es im Browser eigentlich platziert werden würde.
- Bei absolute (dritte Liste von links) wird das Element an einem übergeordneten Element (Vorfahre), welches man festlegen kann, ausgerichtet. Der Bereich, in dem es im Browser eigentlich platziert werden würde, wird frei und die nachfolgenden Elemente rutschen nach.
- Bei fixed (vierte Liste von links) wird das Element am Browserfenster (viewport) ausgerichtet. Dies bedeutet, dass es sich beim Scrollen nicht mitbewegt sondern fix an einer Stelle des Browserfensters bleibt. Der Bereich, in dem es im Browser eigentlich platziert werden würde, wird frei und die nachfolgenden Elemente rutschen nach.
position: static (erste Liste von links)
Bei static passiert nichts. Das Element bleibt dort, wo es im normalen
Textfluss vom Browser platziert wird. Und auch wenn Werte für eine Versetzung (top,
right, bottom, left) angegeben
sind, versetzt sich
das Element nicht.
Static ist auch der Standardwert (default), wenn für ein Element in CSS kein Positionierungstyp angegeben ist.
position: relative (zweite Liste von links)
Bei relative wird das Element von dort aus versetzt, wo es im normalen
Textfluss vom Browser platziert werden würde. Die verwendeten CSS-Eigenschaften
(top,
right, bottom, left) geben an, von welcher Seitebzw. Richtung aus
die Versetzung durchgeführt wird, die zugewiesenen Werte geben an, um wieviel
das Element versetzt wird.
Wenn das Element effektiv versetzt wurde (also nicht alle Werte für die Versetzung 0 waren), hat es nun einen neuen Platz und befindet sich über dem dort befindlichen Element oder Elementen. Wie damit umgegangen wird, wenn sich mehrere Elemente am selben Platz befinden und somit übereinander liegen, wird später besprochen.
Dieser Bereich, wo sich das Element ursprünglich befunden hätte, wird aber nicht "frei", sondern ist noch "verbraucht", als ob sich das Element noch immer dort befinden würde.
position: absolute (dritte Liste von links)
Bei absolute wird das Element komplett aus dem Textfluss entfernt als ob
es nicht da wäre. Die nachfolgenden Elemente "rutschen nach". Dies sieht man im
Beispiel, da nach dem Element "absolute eins" gleich das Element "absolute drei"
folgt. Die Frage ist
nun, wenn das Element aus dem Textfluss entfernt ist, von welcher Stelle aus wird
es versetzt? Dies kann man
gezielt bestimmen: Der Browser betrachtet solange das jeweils (nächste)
umschließende Elternelement, bis er auf eines stößt, das eine Deklaration
mit der Eigenschaft position hat und deren Wert ungleich dem Default-Wert
static ist (also relative, absolute oder
fixed). Vom Inhaltsbereich
(content) dieses Elements wird die Postion berechnet.
Ist keinem "Vorfahren" ein position außer static zugewiesen, so wird das
Wurzelelement body verwendet, also das Element wird an den Grenzen der
HTML-Datei ausgerichtet (so auch in diesem Beispiel, "absolute zwei" befindet
sich wegen top: 20px; right: 20px; ganz rechts oben). Im Regelfall will man jedoch das Element an einem
bestimmten "Vorfahren"-Element ausrichten. Dazu braucht man nur in einer CSS-Regel
für genau dieses Element die Deklaration "position: static;" einfügen. Da
man keine Werte für top, right, bottom oder
left zuweist, wird dieses
Element auch nicht verschoben. Somit wird am Layout der Elternelemente auch
nichts verändert.
position: fixed (vierte Liste von links)
Bei fixed wird das Element komplett aus dem Textfluss entfernt als ob es
nicht da wäre. Die nachfolgenden Elemente "rutschen nach". Dies sieht man im
Beispiel, da nach dem Element "absolute eins" gleich das Element "absolute drei"
folgt. Die Frage ist
nun, wenn das Element aus dem Textfluss entfernt ist, von welcher Stelle aus wird
es verschoben? Im Unterschied
zu absolute wird das Element aber immer am Browserfenster (viewport)
ausgerichtet ("fixed zwei" befindet sich wegen top: 20px; right: 20px; ganz rechts oben).
Der Wert fixed bedeutet aber
auch, dass dieses Element beim Scrollen immer an der
selben (Fenster-) Position bleibt, also nicht mitscrollt.
Vorsicht: Wenn ein vertikales Scrollen vorgesehen ist (ist der
Regelfall), sollte genau unterhalb des fixierten Element der gesamte Raum
freibleiben, da durch das scrollen das Element dort hin kommen wird. Es
benötigt also so etwas wie eine senkrechte "Schneise".
Falls es auch passieren kann,
dass horizontal gescrollt werden wird, müsste auch eine waagrechte "Schneise" frei
bleiben. Dies ist jedoch vom Layout her kaum machbar.
Deshalb sollte man einen
Positionierungstyp fixed eher nicht einsetzen.
Checkliste
Tel.: 0699 10 81 56 31
24 Stunden - 7 Tage die Woche
Beispiel: relative
Die "Checkliste" in der Darstellung rechts ist eine Navigation einer Website für einen
Lieferservice. Die einzelnen Punkte der Liste sind Hyperlinks innerhalb
einer unordered list (ul). Die einzelnen Listenelemente haben einen unteren
Rahmen in rot. Da li Blockelemente sind, geht der Rahmen über die ganze
Breite (das umgebende div hat einen passenden Innenabstand padding).
Dass die Texte genau auf den Linien "geschrieben" stehen, erfolgt nicht von alleine. Dazu benötigt man einen Trick.
Um in der untenstehenden Erklärung die Grenzen der boxen der
einzelnen Elemente zu erkennen, bekommen die li in der Darstellung einen punktierten grauen Rahmen und die a einen durchgezogenen
grauen Rahmen.
Man sieht eindeutig, dass die
untere Grenze der box von a unterhalb der Unterlängen des Textes
ist (z.B. beim g in
Leistungen), und nicht auf der Grundlinie des Textes. Somit ist ohne weitere
Eingriffe der rote Rahmen
der li standardmäßig auch unterhalb der Unterlängen und nicht auf der Grundlinie
des Textes - was aber erwünscht wäre.
Um dies zu erreichen, muss man die box der a so weit nach unten verschieben, bis die Grundlinie
des Textes genau über dem unteren Rahmen der box vom li zu liegen kommt.
Dies geht mit "position: relative;" und "top: 6px;".
Code:
HTML
<div class="check">
<h2>Checkliste</h2>
<ul>
<li><a href="dummy.html">Leistungen</a></li>
<li><a href="dummy.html">Dimensionen</a></li>
<li><a href="dummy.html">Arbeitszeiten</a></li>
<li><a href="dummy.html">Liefergebiete</a></li>
<li><a href="dummy.html">Preise</a></li>
<li><a href="dummy.html">Kontakt</a></li>
</ul>
<p>Tel.: 0699 10 81 56 31 </p>
<p>24 Stunden - 7 Tage die Woche </p>
</div>CSS
.check {
width: 240px;
background-color: #EFD780;
padding: 10px 35px 50px 35px;
font-family: 'Bad Script',cursive;
font-size: 1.1em;
color: #222222;
box-shadow: 4px 4px 5px #666666;
}
.check ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
.check h2 {
text-align: center;
font-size: 1.7em;
}
.check li {
border-bottom: 1px solid #FF0000; /* rote Rahmenlinie am unteren Rand der li */
}
.check li a {
color: inherit;
text-decoration: none;
margin: 0 0 0 10px;
position: relative; /* Positionierungstyp relative, kann verschoben werden */
top: 6px; /* wird von oben 6 Pixel nach unten verschoben */
}
.check p {
font-size: 0.8em;
margin-bottom: -10px;
}
Tiere
- Wolf
- Kuh
- Leguan
- Gazelle
- Lama
Beispiel: absolute
Ein Bereich, in dem links eine Liste von Dingen ist (hier Tiere). Sobald man mit dem Mauszeiger über einen der Listenelemente fährt, erscheint rechts das dazugehörige Bild. Das die Bilder zuerst nicht sichtbar sind und erst erscheinen, wenn man mit dem Mauszeiger über eine Listenelement fährt, wird weiter unten besprochen.
Wie man unten im HTML-Code sieht, sind die Bilder Teil der Listenelemente
li. Diese Struktur ist unbedingt notwendig, damit nachher die
Bilder eingeblendet werden können. Die Bilder haben jedoch dadurch
unterschiedliche (ursprüngliche) Positionen. Damit sie nachher die selbe
Position einnehmen können, muss ein allem gemeinsames Elternelement gefunden
werden. Dies könnte die Liste ul selbst sein, oder das alles
umgebende div.bilder. Dieses div ist die bessere Wahl, da die
Bilder vom Layout her an dessen rechte, obere Ecke ausgerichtet werden
sollen. Somit muss diesem Element die Eigenschaft position mit
dem Wert relative zugewiesen werden und dabei keine
Positionsangaben, damit dieses Element nicht verschoben wird:
.bilder {position: relative;}
Die Bilder selbst werden mit position: absolute aus dem
Textfluss genommen - sie sind somit nicht mehr innerhalb der Liste
positioniert und die Listenelemente "rutschen" zusammen. Ohne weitere
CSS-Angaben würden die Bilder nun genau in einer Ecke des div.bilder
platziert sein. Da dieses einen Innenabstand von 20 Pixel hat, wird die
Position der Bilder ebenfalls mit 20 Pixel angegeben, und zwar von der
rechten, oberen Ecke aus: top: 20px; right: 20px; Die gesamte
Regel ist daher
.bilder img {position: absolute; top: 20px; right: 20px;}
Um jeweils nur ein Bild sichtbar zu machen, wird zuerst für alle Bilder die
Sichtbarkeit entfernt. Die gesamte CSS-Regel heißt dann:
.bilder img {display: none;} Nun soll nur jenes Bild sichtbar sein, wenn
der sich der Mauszeiger über den entsprechenden Listeneintrag befindet. Nun wird
verständlich, warum das einzelne Bild innerhalb (ein Kindelement) eines
Listenelements sein muss. Denn nur so kann man über einen Kontextselektor einen
Zusammenhang zwischen dem Listenelement li und dem entsprechenden
Bildelement img machen, und zwar: .bilder li img .
Wenn sich der Mauszeiger über einen Listenelement befindet, dann trifft
folgender Selektor zu: .bilder li:hover . Das dazugehörige Bild
spricht man dann mit dem Selektor .bilder li:hover img an. Somit
lautet die gesamte CSS-Regel: .bilder li:hover img {display: block;}
Code:
HTML
<div class="bilder">
<h3>Tiere</h3>
<ul>
<li>Wolf <img alt="Wolf" src="bilder/tier-wolf-hoch.jpg" width="96" height="144"></li>
<li>Kuh <img alt="Kuh" src="bilder/tier-kuh-hoch.jpg" width="96" height="144"></li>
<li>Leguan <img alt="Leguan" src="bilder/tier-leguan-hoch.jpg" width="96" height="144"></li>
<li>Gazelle <img alt="Gazelle" src="bilder/tier-gazelle-hoch.jpg" width="96" height="144"></li>
<li>Lama <img alt="Lama" src="bilder/tier-lama-hoch.jpg" width="96" height="144"></li>
</ul>
</div>CSS
.bilder {
width: 300px;
height: 144px;
padding: 20px;
background-color: #CCFF99;
position: relative; /* Die Bilder werden an diesem Element ausgerichtet. */
}
.bilder h3 {
margin-top: 0;
}
.bilder ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.bilder li {
width: 100px;
background-color: #BBEE88;
margin-bottom: 2px;
}
.bilder img {
position: absolute; /* Das Bild wird aus dem Textfluss genommen und absolut positioniert. */
top: 20px; /* Position: 20 Pixel von oben */
right: 20px; /* 20 Pixel von rechts */
display: none; /* Alle Bilder werden vorerst nicht angezeigt. */
}
.bilder li:hover img {
display: block; /* Ist der Mauszeiger über dem Listenelement, so wird das dazugehörende Bild angezeigt. */
}
Weltmarktführer
Durch die verschiedenen Kollektionen und Kollaborationen findet jeder Kunde etwas für seinen Geschmack. Mit der perfekten Kombination aus Style und Funktionalität wurden wir im Bereich Bekleidung zu einem der Weltmarktführer.
Umweltbewusstsein und soziale Verantwortung haben in unserem Unternehmen höchste Priorität.
Beispiel: absolute 2