CSS Layout Grundlagen

display, block, inline, inline-block, none, position und z-index. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.

Lernziele

• Display-Arten unterscheiden
• Positionierung bewusst einsetzen
• z-index-Probleme erkennen

Erklärung

Layout beginnt mit dem normalen Dokumentfluss. Blockelemente nehmen die verfügbare Breite ein, Inline-Elemente fließen im Text, inline-block erlaubt Breite und Höhe im Textfluss.

position verschiebt Elemente aus oder relativ zum normalen Fluss. absolute, fixed und sticky sind nützlich, können aber schnell Überlagerungen erzeugen.

Beispiele

.badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
}

.hidden {
  display: none;
}

inline-block eignet sich für kleine Labels, display: none entfernt ein Element aus Layout und Accessibility Tree.

.toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
}

Sticky-Elemente bleiben innerhalb ihres Scrollbereichs sichtbar.

Typische Fehler

• Alles mit position: absolute platzieren.
• z-index erhöhen, ohne Stacking-Kontext zu verstehen.
• display: none für Inhalte verwenden, die Screenreader noch erreichen sollen.

Best Practices

• Nutze zuerst normalen Flow, Flexbox oder Grid.
• Setze Positionierung gezielt für Overlays, Sticky Bars und kleine Akzente ein.
• Teste Überlagerungen auf kleinen Viewports.

Kleine Übung

Baue eine Seite mit normalem Inhalt, einer Sticky-Navigation und einem kleinen Badge neben einer Überschrift.

Zusammenfassung

CSS sollte Gestaltung systematisch lösen: klare Selektoren, wiederkehrende Werte, responsive Layouts und verständliche Zustände. Gute Stylesheets bleiben auch bei wachsenden Seiten wartbar.

Weiterführende Seiten

• Vorherige Seite: CSS Text und Typography
• Nächste Seite: CSS Flexbox
• Zur Übersicht
• Box Model
• Flexbox