CSS Display & Position - Layout verstehen

Die Properties display und position sind fundamental für CSS-Layouts. Sie bestimmen, wie Elemente angezeigt und positioniert werden.

display - Wie wird das Element angezeigt?

Jedes HTML-Element hat einen Standard-Display-Typ:

display: block

Block-Elemente nehmen die komplette Breite ein:

.block {
    display: block;
    background-color: lightblue;
}

/* Standard-Block-Elemente */
/* <div>, <p>, <h1>-<h6>, <section>, <article>, <header>, <footer> */

Eigenschaften:

• ✅ Nimmt volle Breite des Containers ein
• ✅ Beginnt auf neuer Zeile
• ✅ width/height können gesetzt werden
• ✅ Margin/Padding funktioniert auf allen Seiten

Beispiel:

<div>Block 1</div>
<div>Block 2</div>
<!-- Block 2 erscheint UNTER Block 1 -->

display: inline

Inline-Elemente fließen im Text mit:

.inline {
    display: inline;
    background-color: yellow;
}

/* Standard-Inline-Elemente */
/* <span>, <a>, <strong>, <em>, <img> */

Eigenschaften:

• ✅ Nur so breit wie der Inhalt
• ✅ Bleibt in der gleichen Zeile
• ❌ width/height werden ignoriert
• ❌ Nur horizontale Margin/Padding wirkt

Beispiel:

<span>Inline 1</span> <span>Inline 2</span>
<!-- Beide in einer Zeile nebeneinander -->

display: inline-block

Das Beste aus beiden Welten:

.inline-block {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: lightgreen;
}

Eigenschaften:

• ✅ Bleibt in der Zeile (wie inline)
• ✅ width/height funktioniert (wie block)
• ✅ Margin/Padding auf allen Seiten
• ✅ Perfekt für Buttons, Cards nebeneinander

Beispiel:

<div style="display: inline-block;">Box 1</div>
<div style="display: inline-block;">Box 2</div>
<!-- Beide nebeneinander, aber mit Größe -->

display: none

Element wird komplett versteckt:

.hidden {
    display: none;  /* Komplett unsichtbar + nimmt keinen Platz ein */
}

/* Vergleich: */
.invisible {
    visibility: hidden;  /* Unsichtbar, aber Platz bleibt reserviert */
}

Unterschied zu visibility:

• display: none - Element existiert nicht im Layout
• visibility: hidden - Element unsichtbar, aber Platz bleibt

display: flex und grid

Moderne Layout-Methoden (eigene Artikel):

.container {
    display: flex;   /* Flexbox-Layout */
}

.container {
    display: grid;   /* Grid-Layout */
}

Vergleich: block vs inline vs inline-block

<style>
.block {
    display: block;
    width: 200px;
    height: 50px;
    background-color: lightblue;
    margin: 10px;
}

.inline {
    display: inline;
    width: 200px;        /* Wird ignoriert! */
    height: 50px;        /* Wird ignoriert! */
    background-color: yellow;
    margin: 10px;        /* Nur horizontal! */
}

.inline-block {
    display: inline-block;
    width: 200px;
    height: 50px;
    background-color: lightgreen;
    margin: 10px;
}
</style>

<!-- Block-Elemente -->
<div class="block">Block 1</div>
<div class="block">Block 2</div>

<!-- Inline-Elemente -->
<span class="inline">Inline 1</span>
<span class="inline">Inline 2</span>

<!-- Inline-Block-Elemente -->
<div class="inline-block">Inline-Block 1</div>
<div class="inline-block">Inline-Block 2</div>

position - Wo wird das Element positioniert?

position: static (Standard)

Normale Position im Dokumentenfluss:

.normal {
    position: static;  /* Standard, kann man weglassen */
}

Eigenschaften:

• Standard für alle Elemente
• Folgt dem normalen Dokumentenfluss
• top/right/bottom/left haben keine Wirkung

position: relative

Relativ zur normalen Position verschieben:

.moved {
    position: relative;
    top: 20px;      /* 20px nach unten */
    left: 30px;     /* 30px nach rechts */
    background-color: lightblue;
}

/* Wichtig: */
/* - Element bleibt im Fluss (Platz bleibt reserviert) */
/* - Andere Elemente "sehen" die Original-Position */

Wann nutzen?

• ✅ Element leicht verschieben
• ✅ Als Referenzpunkt für absolute-Kinder
• ✅ Für z-index

Beispiel:

<div style="position: relative; top: 20px;">
    Ich bin 20px nach unten verschoben
</div>

position: absolute

Aus dem Fluss genommen, positioniert zum nächsten positioned Ancestor:

.container {
    position: relative;  /* Referenzpunkt! */
    width: 300px;
    height: 200px;
    background-color: lightgray;
}

.absolute-box {
    position: absolute;
    top: 20px;      /* 20px vom oberen Rand des Containers */
    right: 20px;    /* 20px vom rechten Rand */
    width: 100px;
    height: 100px;
    background-color: red;
}

Eigenschaften:

• ❌ Nimmt keinen Platz im Fluss ein
• ✅ Positioniert zu nächstem position: relative/absolute/fixed Ancestor
• ✅ Falls keiner → zu <body>
• ✅ top/right/bottom/left funktioniert

Häufiger Use Case:

<div style="position: relative;">
    <div style="position: absolute; top: 10px; right: 10px;">
        Badge
    </div>
    Karten-Inhalt
</div>

position: fixed

Fixiert zur Viewport (Browserfenster):

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: navy;
    color: white;
    padding: 10px;
    z-index: 1000;
}

/* Bleibt beim Scrollen sichtbar! */

Eigenschaften:

• ✅ Fixiert zum Browserfenster
• ✅ Bleibt beim Scrollen sichtbar
• ❌ Nimmt keinen Platz im Fluss ein

Häufige Use Cases:

• Fixed Header (Navigation)
• Fixed Footer
• Floating Action Button
• Cookie-Banner

Beispiel:

<!-- Bleibt immer oben -->
<header style="position: fixed; top: 0; width: 100%;">
    Navigation
</header>

position: sticky

Hybrid aus relative und fixed:

.sticky-header {
    position: sticky;
    top: 0;
    background-color: white;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

/* Verhält sich wie relative, bis Scroll-Position erreicht wird */
/* Dann wie fixed! */

Eigenschaften:

• Verhält sich normal bis zu bestimmter Scroll-Position
• Dann fixiert wie position: fixed
• ✅ Nimmt Platz im Fluss ein
• ✅ Perfekt für Sticky Headers in Sections

Wann nutzen?

• Sticky Table Headers
• Sticky Navigation innerhalb einer Section
• Sidebar die beim Scrollen "klebt"

Positionierungs-Properties

top, right, bottom, left

Nur wirksam bei position: relative/absolute/fixed/sticky:

.box {
    position: absolute;
    top: 20px;       /* 20px vom oberen Rand */
    right: 30px;     /* 30px vom rechten Rand */
    bottom: 40px;    /* 40px vom unteren Rand */
    left: 50px;      /* 50px vom linken Rand */
}

/* Zentrieren mit absolute */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* Perfekte Zentrierung! */
}

z-index - Ebenen stapeln

Kontrolliert die Stapelreihenfolge:

.layer-1 {
    position: relative;
    z-index: 1;
    background-color: red;
}

.layer-2 {
    position: relative;
    z-index: 2;     /* Liegt über layer-1 */
    background-color: blue;
}

.layer-3 {
    position: relative;
    z-index: 10;    /* Liegt über allen */
    background-color: green;
}

Wichtig:

• Funktioniert nur mit position: relative/absolute/fixed/sticky
• Höhere Zahl = weiter vorne
• Kann negativ sein: z-index: -1

Typische z-index Werte:

.content {
    z-index: 1;
}

.dropdown {
    z-index: 100;
}

.modal-overlay {
    z-index: 1000;
}

.modal {
    z-index: 1001;
}

.tooltip {
    z-index: 10000;
}

Praktische Beispiele

Beispiel 1: Card mit Badge

.card {
    position: relative;  /* Wichtig: Referenzpunkt! */
    width: 300px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: red;
    color: white;
    padding: 5px 10px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
}

<div class="card">
    <span class="badge">NEU</span>
    <h3>Produktname</h3>
    <p>Beschreibung...</p>
</div>

Beispiel 2: Fixed Navigation

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 15px 20px;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Wichtig: Body braucht padding-top! */
body {
    padding-top: 60px;  /* Höhe der Navbar */
}

Beispiel 3: Modal / Overlay

/* Overlay (dunkler Hintergrund) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

/* Modal (zentriert) */
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    max-width: 500px;
    width: 90%;
}

Beispiel 4: Sticky Table Header

table {
    width: 100%;
    border-collapse: collapse;
}

thead th {
    position: sticky;
    top: 0;
    background-color: #f5f5f5;
    padding: 10px;
    border-bottom: 2px solid #ddd;
    z-index: 10;
}

tbody td {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

Beispiel 5: Buttons nebeneinander

.button {
    display: inline-block;  /* Nebeneinander + Größe kontrollierbar */
    padding: 10px 20px;
    margin: 5px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: #0056b3;
}

<a href="#" class="button">Button 1</a>
<a href="#" class="button">Button 2</a>
<a href="#" class="button">Button 3</a>

Best Practices

✅ DO:

1. position: relative als Referenz für absolute-Kinder
2. Fixed Navigation mit padding-top am body kompensieren
3. z-index System etablieren (nicht wild 9999 nutzen)
4. inline-block für Buttons/Items nebeneinander
5. Sticky für Section-Headers

❌ DON'T:

1. Nicht zu viel absolute/fixed (schwer wartbar)
2. Nicht display: inline mit width/height
3. Nicht z-index: 999999 (übertrieben!)
4. Nicht fixed ohne body-padding (Inhalt wird verdeckt)
5. Nicht absolute ohne relative Parent (positioniert zu body)

Häufige Anfängerfehler

Fehler 1: absolute ohne relative Parent

❌ FALSCH:

<div>  <!-- Kein position! -->
    <div style="position: absolute; top: 10px;">
        Ich positioniere mich zu <body>!
    </div>
</div>

✅ RICHTIG:

<div style="position: relative;">  <!-- Referenzpunkt! -->
    <div style="position: absolute; top: 10px;">
        Ich positioniere mich zum Parent!
    </div>
</div>

Fehler 2: display: inline mit width

❌ FALSCH:

span {
    display: inline;
    width: 200px;  /* Wird ignoriert! */
}

✅ RICHTIG:

span {
    display: inline-block;  /* Jetzt funktioniert width! */
    width: 200px;
}

Fehler 3: Fixed Header ohne body-padding

❌ FALSCH:

.header {
    position: fixed;
    top: 0;
    height: 60px;
}
/* Inhalt wird unter Header versteckt! */

✅ RICHTIG:

.header {
    position: fixed;
    top: 0;
    height: 60px;
}

body {
    padding-top: 60px;  /* Höhe der Navbar! */
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

header {
    position: fixed;
    top: 0;
    height: 60px;
    width: 100%;
    z-index: 1000;
}

/* Kompensiere Header-Höhe */
body {
    padding-top: 60px;
}

/* Oder mit CSS Variable */
:root {
    --header-height: 60px;
}

header {
    height: var(--header-height);
}

body {
    padding-top: var(--header-height);
}

:root {
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-tooltip: 600;
}

.dropdown {
    z-index: var(--z-dropdown);
}

.modal {
    z-index: var(--z-modal);
}

nav {
    position: sticky;
    top: 0;
    background: white;
    padding: 20px;
    transition: padding 0.3s, box-shadow 0.3s;
}

/* Kleiner beim Scrollen */
nav.scrolled {
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

Übungsaufgaben

Aufgabe 1: Card mit Badge

Erstelle eine Card mit:

• position: relative am Container
• Badge oben rechts mit position: absolute
• Border und border-radius

Aufgabe 2: Fixed Navigation

Style eine Fixed Navigation:

• Bleibt oben beim Scrollen
• 100% Breite
• Body mit padding-top kompensieren

Aufgabe 3: Button-Gruppe

Erstelle 3 Buttons nebeneinander:

• display: inline-block
• Gleiche Größe
• Margin zwischen Buttons

Nächste Schritte

Du kennst jetzt:

• ✅ display (block, inline, inline-block, none)
• ✅ position (static, relative, absolute, fixed, sticky)
• ✅ z-index für Stapelreihenfolge
• ✅ top/right/bottom/left
• ✅ Praktische Anwendungsfälle

Als Nächstes lernst du:

• Flexbox (modernes 1D-Layout)
• CSS Grid (2D-Layouts)
• Responsive Design mit Media Queries

Weiter so! 🚀