Quartz 5

Box Positionierung

Properties3
ThemaCSS, Webentwicklung
titleBox Positionierung
modified—

2 min read

position: [absolute, relative, fixed, static, sticky]

Mit top, right, bottom, left kann die genaue Position angegeben werden – diese wirken sich aber nur bei positionierten Elementen aus (also nicht bei static).

WertBeschreibung
staticStandardwert. Element folgt dem normalen Dokumentenfluss. top/left etc. haben keine Wirkung.
relativeElement bleibt im Dokumentenfluss, kann aber relativ zur eigenen Ursprungsposition verschoben werden.
absoluteElement wird aus dem Dokumentenfluss herausgenommen. Positionierung relativ zum nächsten positionierten Vorfahren.
fixedWie absolute, aber relativ zum Viewport. Bleibt beim Scrollen an derselben Stelle.
stickyVerhält sich wie relative, bis ein Scroll-Schwellenwert erreicht wird – dann wie fixed.

„Positionierter Vorfahre" bedeutet: das nächste Elternelement, das nicht position: static hat.

Vergleich im Überblick

WertIm Dokumentenfluss?BezugspunktScrollt mit?
staticja–ja
relativejaEigene Ursprungspositionja
absoluteneinNächster positionierter Vorfahreja
fixedneinViewportnein
stickyja (zunächst)Scrollcontainerteilweise

Beispiele

relative

.box {
    position: relative;
    top: 20px;   /* 20px nach unten verschoben */
    left: 10px;  /* 10px nach rechts verschoben */
}

Der ursprüngliche Platz im Layout bleibt reserviert – andere Elemente rücken nicht nach.

absolute

.parent {
    position: relative; /* Bezugspunkt für das Child */
}
 
.child {
    position: absolute;
    top: 0;
    right: 0; /* oben rechts im Parent */
}

Ohne positionierten Parent gilt der <body> als Bezugspunkt.

fixed

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

sticky

.header {
    position: sticky;
    top: 0; /* klebt an dieser Position, sobald der Scroll-Schwellenwert erreicht wird */
}

sticky benötigt zwingend eine Angabe wie top, bottom etc., sonst verhält es sich wie relative.

z-index

Positionierte Elemente (alle außer static) können mit z-index gestapelt werden.

.overlay {
    position: absolute;
    z-index: 10; /* liegt über Elementen mit niedrigerem z-index */
}

z-index funktioniert nur bei positionierten Elementen.

Graph View

Backlinks