Übung 8: Eine Marke in die Ecke einer Karte setzen

Hinweise

Lösung

.karte { position: relative; }
.marke { position: absolute; top: 8px; right: 8px; }

Woran sich absolute Positionierung misst

Eine absolut positionierte Box misst ihre Kantenangaben am nächsten Vorfahren, der selbst positioniert ist – also einen anderen Wert als den Ausgangswert trägt. Findet sich keiner, ist der Bezug der ursprüngliche enthaltende Block, praktisch die Fläche des Dokuments. Genau das passiert in der Aufgabe, bevor die Karte einen eigenen Wert bekommt: Die Marke wandert in die Ecke der Seite.

Gemessen wird dabei an der Innenkante des Rahmens des Bezugselements, also um Inhalt und Innenabstand herum. Der Außenabstand des Bezugselements zählt nicht mit. Bei einer Karte mit Rahmen sitzt die Marke also innerhalb des Rahmens, nicht darauf – wer sie darüberlegen will, arbeitet mit negativen Werten.

Der Wert relative an der Karte tut dabei zweierlei: Er macht sie zum Bezugsrahmen, und er verschiebt sie selbst um nichts, weil keine Kantenangabe gesetzt ist. Diese Kombination – Bezugsrahmen ohne eigene Verschiebung – ist der mit Abstand häufigste Einsatz der relativen Positionierung.

Was sonst noch zum Bezugsrahmen wird

Nach CSS 2.1 sind weitere Auslöser hinzugekommen. Ein Element mit einer Transformation, mit einem Filter oder mit einer erklärten Eindämmung wird ebenfalls zum Bezugsrahmen für seine absolut positionierten Nachfahren, auch wenn seine Positionierung unverändert bleibt.

Das erklärt eine Klasse von Fehlern, die sonst rätselhaft wirkt: Eine Anordnung funktioniert, bis weiter oben im Baum eine Animation eine Transformation setzt – und plötzlich hängt die Marke am falschen Kasten. Für am Fenster verankerte Elemente ist der Effekt noch drastischer, weil sie dann nicht mehr am Fenster hängen.

Umgekehrt lässt sich das gezielt nutzen: Wer will, dass ein Aufklappmenü innerhalb einer Karte bleibt, gibt der Karte einen Bezug; wer will, dass es darüber hinausragt, nimmt ihn weg. Der Vergleich position relative vs absolute geht die Fälle im Einzelnen durch.

Abschneiden, Rollen und die Reihenfolge

Drei Nebenwirkungen gehören zu diesem Muster. Erstens wird eine absolut positionierte Box nur dann von einem Vorfahren abgeschnitten, wenn dieser Vorfahr auch ihr Bezugsrahmen ist – ein herausragendes Menü funktioniert also, solange der abschneidende Kasten nicht selbst positioniert ist.

Zweitens rollt sie mit, wenn ihr Bezugsrahmen innerhalb des rollenden Bereichs liegt, und bleibt stehen, wenn er außerhalb liegt. Wer eine Marke fest an einer Karte in einer rollenden Liste halten will, muss den Bezug also an der Karte setzen, nicht am Bereich darum.

Drittens ändert die Positionierung die Zeichenreihenfolge: Positionierte Elemente werden nach den nicht positionierten gezeichnet und liegen damit oben, auch ohne Stapelindex. Erst wenn mehrere positionierte Elemente einander überlappen, wird der Index gebraucht – und dann lohnt es sich zu wissen, dass ein Element mit einem Index einen eigenen Stapelkontext eröffnet, in dem seine Kinder eingeschlossen sind.

Die Marke lesbar und verständlich halten

Eine Marke in der Ecke einer Karte liegt fast immer über etwas – über einem Bild, einem farbigen Kopf, einem Verlauf. Damit ist ihr Kontrast nicht mehr vorhersagbar: Was auf dem Beispielbild gut aussieht, verschwindet auf dem nächsten. Eine eigene Hintergrundfläche unter der Marke löst das zuverlässiger als eine Textfarbe, die zum Bild passen soll.

Der zweite Punkt betrifft die Bedeutung. Steht in der Marke eine Information, die es sonst nirgends gibt, muss sie vorgelesen werden – dann gehört sie in den Textfluss und nicht in ein Pseudoelement, dessen Inhalt aus dem Stylesheet stammt. Ob eine Sprachausgabe generierten Inhalt vorliest, hängt vom Programm ab, und darauf sollte sich niemand verlassen.

Der dritte Punkt ist die Reihenfolge: Optisch steht die Marke oben rechts, vorgelesen wird sie dort, wo sie im Quelltext steht. Bei einer Karte ist es meist richtig, sie vor dem Titel zu nennen, weil sie ihn einordnet – „Neu: Titel“ liest sich sinnvoller als „Titel … Neu“. Und wenn die Marke nur dekorativ ist, gehört sie ausdrücklich aus dem Baum genommen, damit sie in einer Liste aus zwanzig Karten nicht zwanzigmal vorgelesen wird.

Gemessen wird in dieser Aufgabe die Lage der Marke gegenüber der Karte. Ob der Bezugsrahmen über die relative Positionierung oder über einen der später hinzugekommenen Auslöser entsteht, prüft der Prüfer nicht – die relative Positionierung ohne eigene Verschiebung ist nur der geradlinigste Weg und derjenige, der in jedem Browser seit CSS 2.1 gilt.

Fragen zur Übung