Positionierung und Layout

Diese Lektion behandelt CSS-Techniken zur Positionierung von Elementen und grundlegendes Layout-Management.

1. Position-Eigenschaft

Die Eigenschaft position bestimmt, wie ein Element im Layout positioniert wird.

div {
    position: absolute;
    top: 50px;
    left: 100px;
}

Mit z-index wird die Stapelreihenfolge von positionierten Elementen festgelegt.

div {
    position: relative;
    z-index: 10; /* höher = weiter vorne */
}

Float erlaubt es, Elemente nach links oder rechts auszurichten und Text oder andere Elemente darum fließen zu lassen.

img {
    float: left;
    margin-right: 10px;
}

Float sollte mit clear kombiniert werden, um Layout-Probleme zu vermeiden.

display steuert, wie ein Element im Layout dargestellt wird.

span {
    display: inline-block;
    width: 100px;
}

Flexbox erleichtert das Layout und die Ausrichtung von Elementen innerhalb eines Containers.

div.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

Die Beherrschung von Positionierung und Layout ist essenziell für sauberes und flexibles Webdesign.