EMZETT.display: wie sich ein Element im Fluss verhält
| Wert | Verhalten |
|---|---|
block | eigene Zeile, volle Breite; width/height/margin wirken |
inline | im Textfluss; width/height wirken nicht |
inline-block | im Textfluss, aber mit Größen |
none | nicht dargestellt und ohne Platz |
flex, grid | Layout-Container (eigene Kapitel) |
contents | Element selbst "verschwindet", Kinder bleiben |
Ergebnis
Sichtbarkeit
| Eigenschaft | Wirkung |
|---|---|
display: none | entfernt aus Layout und für Screenreader |
visibility: hidden | unsichtbar, behält Platz |
opacity: 0 | durchsichtig, bleibt klickbar, Screenreader lesen es |
hidden-Attribut | wie display: none |
Für Inhalte, die nur Screenreader lesen sollen (zum Beispiel ein Text für ein Icon), nutzt man eine "visually hidden"-Klasse:
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}position: Elemente gezielt platzieren
| Wert | Verhalten |
|---|---|
static | Standard, normaler Fluss |
relative | im Fluss, aber mit top/left verschiebbar; Bezugspunkt für Kinder |
absolute | aus dem Fluss genommen; richtet sich am nächsten positionierten Vorfahren aus |
fixed | bleibt am Fenster stehen (Kopfzeile, Cookie-Banner) |
sticky | scrollt mit, bis eine Grenze erreicht ist, dann klebt es |
Ergebnis
Das Elternelement mit position: relative ist der Bezugspunkt. Ohne ihn orientiert sich absolute an der ganzen Seite.
sticky
Ergebnis
Scrolle im Kasten: Die Überschriften "kleben" oben fest. Praktisch für Tabellenköpfe und Navigationsleisten.
z-index: Überlagerung
Positionierte Elemente können sich überlappen. z-index legt fest, wer oben liegt (höhere Zahl = weiter vorn).
Ergebnis
z-index wirkt nur bei positionierten Elementen (und Flex/Grid-Kindern). Jeder Stapelkontext (position mit z-index, transform, opacity < 1) bildet eine eigene Ebene: Ein Kind kann nie über ein Element außerhalb seines Stapelkontexts hinaus, egal wie hoch sein z-index ist. Halte z-index-Werte klein und dokumentiere sie (zum Beispiel als Variablen).
float (veraltet für Layout)
float lässt Elemente seitlich im Text umfließen, früher auch für Layouts. Heute nutzt man dafür Flexbox und Grid; float bleibt nur für Bilder mit Textumfluss:
Ergebnis
Überlauf und Scrollen
Ergebnis
Mit scroll-snap rasten Elemente beim Scrollen ein: ideal für Karussells.
Cursor und Interaktion
cursor: pointer zeigt eine Hand, not-allowed ein Verbot, grab eine greifende Hand. pointer-events: none macht ein Element für die Maus "durchlässig". user-select: none verhindert Textmarkierung (sparsam einsetzen).
Merke
displaybestimmt das Flussverhalten:block,inline,inline-block,none,flex,griddisplay: noneentfernt völlig,visibility: hiddenbehält den Platzposition: relative+absoluteplatziert in einem Elternelement;fixedam Fenster;stickyklebtz-indexordnet die Überlagerung; Stapelkontexte beachten- Für Layout statt
floatlieber Flexbox und Grid
Aufgabe
Baue eine Kopfzeile, die beim Scrollen oben kleben bleibt (sticky), und ein Abzeichen (Zahl in einem Kreis) in der oberen rechten Ecke einer Karte.