Klebende Position

Der letzte Wert von position ist sticky. Ein klebendes Element ist eine Mischung aus einem relativen und einem fixierten. Zuerst verhält es sich wie ein relatives Element: Es ist im normalen Fluss und scrollt mit der Seite. Aber sobald das Scrollen es über den Rand tragen würde, den seine Verschiebung festlegt, zum Beispiel top: 0, bleibt es an diesem Rand des Fensters kleben und bleibt dort, wie ein fixiertes Element.

Ein klebendes Element verlässt sein Elternelement allerdings nie. Es klebt nur, solange sein Elternelement auf dem Bildschirm ist: Wenn das Ende des Elternelements vorbeiscrollt, wird das klebende Element mit ihm weggeschoben. Probiere es in dieser Box aus. Beide Überschriften darin haben position: sticky und top: 0, und jede steht in ihrem eigenen Abschnitt. Die Box scrollt für sich, die Überschriften kleben also am oberen Rand der Box statt am oberen Rand des Fensters:

Ohne Verschiebung (top, bottom und so weiter) klebt ein klebendes Element überhaupt nicht.

Die klebende Position wird oft für eine Navigation verwendet, die beim Scrollen am oberen Rand des Fensters bleibt. Anders als ein fixiertes Element behält ein klebendes seinen Platz im normalen Fluss, deckt also am Anfang der Seite den Inhalt darunter nicht zu.

Und wenn sich Elemente überlappen, welches liegt oben? Elemente mit einer anderen Position als static werden über den statischen gezeichnet, und untereinander in der Reihenfolge, in der sie im HTML stehen: Ein späteres überdeckt ein früheres. Das können wir mit der Eigenschaft z-index ändern, die bei Elementen funktioniert, deren Position nicht static ist: Ein Element mit höherem z-index überdeckt eines mit niedrigerem Wert. Elemente ohne z-index verhalten sich, als wäre er 0.