Das Urgestein der CSS-Slideshows
HTML-Blöcke mit CSS position: relative verhalten sich nicht anders als Blöcke ohne Positionierung. Sie fließen mit dem Inhalt und können also auch mit CSS float kombiniert werden.
Meist verwenden wir position: relative zusammen mit position: absolute in Slideshows, in Drop-Down-Menüs alter Schule, für Overlays von Text über Bildern und in Animationen.
div.block { position: relative; float: left; }
Ich bin GRÜN und relativ positioniert
position:relative;float:right
Relative Positionierung kann also mit float kombiniert werden.
Aber in GRÜN liegt auch GOLD, ein Block mit
position:absolute;right:0;top:0
Weil GRÜN relativ positioniert ist, bildet GRÜN das Koordinatensystem von GOLD. Wenn GRÜN verschoben wird, wandert GOLD mit.
Ich bin BLAU, ein ganz normaler Block ohne CSS position. Weil GRÜN mit CSS float notiert ist, bricht der Text in BLAU um.
Der Block GOLD sitzt absolut positioniert im relativ positionierten Block GRÜN. Wenn GRÜN nach unten rutscht (z.B. weil ein Header über dem Inhalt größer oder die Schriftgröße geändert wird), rutscht der absolut positionierte Block mit, aber bleibt immer auf derselben Position innerhalb von GRÜN.
Sitzt in einem relativ positionierten Block ein absolut positionierter Block, wird die Position des absolut positionierten Blocks nicht mehr relativ zum HTML-Dokument, sondern relativ zum Block mit position: relative berechnet.
<div id="GOLD" style="background: yellow"> <div style="background: red; position: absolute"> … </div> </div>
CSS position:absolute im Layout
Im Layout bei der Positionierung der Blöcke für Header, Inhalt und Navigation wird position: absolute eher selten verwendet, denn was absolut positioniert ist, bleibt fest an seiner Position im HTML-Dokument verankert. Bei Änderungen der Schriftgröße oder wenn die Slideshow im Header der Webseite größer wird, muss also immer nachgearbeitet werden. Das ist aufwändig und fehlerträchtig.
Für das Layout hat sich in der Vergangenheit eine statische Positionierung (also keine Positionierung) kombiniert mit float: left oder float: right etabliert, da sich aus dieser Kombination ein flexibleres Layout entwickeln lies. Mit CSS3 ist display:flex / display:grid zum Standard für die Positionierung geworden.
Aber die Kombination aus relativer und absoluter Positionierung bringt der Navigation ein paar Kunststücke bei und ist weiterhin die Basis für Slideshows.
CSS Slideshow mit relativer und absoluter Positionierung
Ein Block wird ohne weitere Angaben nur so groß wie sein Inhalt, aber wenn der Inhalt absolut positioniert ist, bekommt der relativ positionierte Block davon nichts mit.
Darum sitzt in der Slideshow mit drei Bildern klammheimlich und unsichtbar ein viertes Bild: placeholder.jpg, dessen Breite und Höhe dasselbe Verhältnis haben wie die »richtigen« Bilder. Dank der bestens bekannte Konstruktion img { width: 100%; height: auto } zieht der Platzhalter den umfassenden Block zur gewünschten Größe auf.
<div class="gallery">
<img src="pferde.jpg" width="1200" height="800" alt="…">
<img src="gatter.jpg" width="1200" height="800" alt="…">
<img src="weiden.jpg" width="1200" height="800" alt="…">
<img src="placeholder.jpg" width="3" height="2" alt="…">
</div>
Das ist der De-facto-Standard für Slideshows: absolut positionierte Bilder in einem relativ positionierten Block.
.gallery {
position: relative;
}
.gallery img {
position: absolute;
top:0; left:0;
width: 100%;
height: auto;
}
Der Platzhalter ist relativ positioniert, durch visibility: hidden nicht sichtbar, aber zieht den Block durch width: 100%; height: auto; vollständig auf.
.gallery img:last-child {
position:relative;
visibility: hidden;
}
Der Rest des CSS gehört der Keyframes-Animation für die CSS-Slideshow – kein Javascript nötig und responsiv ist die Show auch.
.gallery img:nth-child(3) {
animation: cycle 15s 0s ease infinite;
}
.gallery img:nth-child(2) {
animation: cycle 15s 5s ease infinite;
}
.gallery img:nth-child(1) {
animation: cycle 15s 10s ease infinite;
}
@keyframes cycle {
0% { top: 0px; z-index: 1; opacity: 1}
20% { top: 0px; z-index: 1; opacity: 1}
33.3% { top: -100vh; z-index: -1; opacity: 0}
66.6% { top: 0px; z-index: -1; opacity: 0 }
100% { top: 0px; z-index: -1; opacity: 1}
}
position: absolut zentriert
Frickelig: Ein Element, das mit position: absolute in einem Element mit position: relative sitzt, zentriert zu setzen.
Nehmen wir eine Slideshow, in der Bilder mittig vor einem Hintergrund sitzen:
<div id="bg">
<img src="slide1.png" />
…
<img src="slideN.png" />
</div>
Für ein Element, das mit position:absolute zentriert werden soll, wird left bzw. top mit 50% notiert. Dann muss das Element mit negativem margin-left bzw. margin-top um die Hälfte seiner Breite / Höhe nach links bzw. oben geschoben werden.
#bg {
position: relative;
width: 90%;
height: 20vh;
min-height: 280px;
background: hsl(190,10%,80%) url(textur.png);
}
#bg img {
position: absolute;
width: 60%;
height: auto;
transform: translate(-50%, -50%);
left: 50%; top: 50%;
}
Dropdown-Menü
Aus dem Jahr 2003 stammt die Idee, die Kombination aus relativer und absoluter Positionierung für eine barrierefreie Navigation mit einem Pulldown-Menü zu nutzen: Das Mutterschiff der Pulldown-Menüs war das Suckerfish-Dropdown.
Praktisch ist diese Kombination z.B. für den Seitenkopf mit der Hauptnavigation. Die obere Ebene der Navigation wird relativ positioniert, die erste und zweite Ebene eines Pull-Down Menüs können dann absolut in Relation zu den Einträgen der oberen Ebene platziert werden. Der Klassiker nutzte :hover, um die Untermenüs beim Hovern mit der Maus zu öffnen und zu schließen, wenn die Maus das Submenu verließ.
Hovern ist mit dem Aufkommen der mobilen Geräte und ihrer Touch-Screens ins Aus geraten, aber das Layout der Pulldown-Menüs ist immer noch intuitiv für den Benutzer.
<div class="beispiel-css-menue"> <ul class="ul-menu"> <li class="close">…</li> <li class="li-menu"> <label class="label" for="kuchen"> Kuchen <input id="kuchen" name="mainmenu" type="radio"> <ul class="sub">…</ul> </label> </li> <li class="li-menu"> <label class="label" for="gebäck"> Gebäck <input id="gebäck" name="mainmenu" type="radio"> <ul class="sub">…</ul> </label> </li> <li class="li-menu"> <label class="label" for="brot"> Brote <input id="brot" name="mainmenu" type="radio"> <ul class="sub">…</ul> </label> </li> </ul> </div>
.beispiel-css-menue {
position: relative;
}
.beispiel-css-menue ul {
list-style-type: none;
}
.beispiel-css-menue li.close {
position: absolute;
}
@media (min-width: 720px) {
.ul-menu {
display: flex;
}
.li-menu {
position: relative;
width: 30%;
}
}
Responsives Suckerfish-Menü – Demo-Version mit HTML und CSS
Hier sitzen input type="radio" mit einem label-Element, damit damit sich das Untermenü bei einem Klick mit der Maus oder einem Touch öffnet. Das Layout funktioniert immer noch mit einer absoluten Position innerhalb eines relativ positionierten Elements. Ein Klick oder Touch auf das ✕ am Ende der Dropdown-Navigation schließt das Untermenü.
Die Technik hinter den Radio- und label-Elementen ist dieselbe wie beim Accordeon ohne Javascript.
Weitere Anwendungen für absolute Positionierung in relativ positionierten Blöcken sind Slideshows, Text über Bildern und CSS clip – das Beschneiden von Bildern..
