In Chrome 22 unterscheidet sich das Layoutverhalten von position:fixed-Elementen geringfügig von früheren Versionen. Alle position:fixed-Elemente bilden jetzt neue Stapelkontexte. Dadurch wird die Stapelreihenfolge einiger Seiten geändert, wodurch die Seitenlayouts möglicherweise beschädigt werden. Das neue Verhalten entspricht dem Verhalten von WebKit-Browsern auf Mobilgeräten (iOS Safari und Chrome für Android).
Was ist gestapelt?
Jeder kennt und liebt die z-index, mit der die Tiefenreihenfolge von Elementen auf einer Seite bestimmt wird. Allerdings sind nicht alle Z-Indexe gleich: Die z-index eines Elements bestimmt nur die Reihenfolge relativ zu anderen Elementen im selben Stapelkontext. Die meisten Elemente auf einer Seite befinden sich in einem einzelnen Stamm-Stacking-Kontext, aber absolut oder relativ positionierte Elemente mit nicht automatischen z-index-Werten bilden einen eigenen Stapelkontext. Das heißt, alle untergeordneten Elemente werden innerhalb der übergeordneten Datei in einer Z-Reihenfolge angeordnet und nicht mit Inhalten von außerhalb des übergeordneten Elements überlappen. Ab Chrome 22 werden für position:fixed-Elemente auch eigene Stapelkontexte erstellt.
Einen allgemeinen Überblick über Stacking-Kontext bietet dieser MDN-Artikel.
Vergleichen Sie position:fixed mit dem Attribut „position:sticky“: Als Referenz erstellt position:sticky immer einen neuen Stapelkontext.
Ziel
In mobilen Browsern (Mobile Safari, Android-Browser, Qt-basierte Browser) werden die Elemente position: Diese Änderung wird auf Desktop-Computern umgesetzt, und zwar aus drei Gründen:
- Ein unterschiedliches Rendering-Verhalten in mobilen und Desktop-Browsern ist für Webautoren ein Stolperstein. CSS sollte, wenn möglich, überall gleich funktionieren.
- Bei Tablets ist nicht klar, welcher der „mobilen“ oder „Desktop“-Algorithmen für die Kontexterstellung besser geeignet ist.
- Die Optimierung der Scrollleistung von Mobilgeräten auf Desktop-Computer ist sowohl für Nutzer als auch für Autoren von Vorteil.
Einzelheiten zu der Änderung
Hier ein Beispiel für die verschiedenen Layoutverhaltensweisen: https://codepen.io/paulirish/pen/CgAof
Durch diese Änderung werden beide Versionen wie die rechte Version gerendert.
In diesem Beispiel hat das grüne Kästchen ein z-index: 1, das rosafarbene Kästchen einen z-index: 3 und das orangefarbene Kästchen z-index: 2. Der blaue Rahmen ist ein Vorgänger des orangefarbenen Kastens und hat position:fixed.
Wenn das blaue Kästchen einen eigenen Stapelkontext erhält, wird der z-index des orangefarbenen Kästchens relativ zum Stapelkontext der blauen Box berechnet. Da das blaue Feld einen z-index von auto hat, d. h. es im Stammkontext die Stapelebene null hat, bedeutet dies, dass der orangefarbene Rahmen hinter den grünen und rosa Feldern landet, die im Stammkontext die Z-Indexe 1 bzw. 3 haben.
Wenn das blaue Kästchen keinen eigenen Stapelkontext erhält, wird der z-index des orangefarbenen Rahmens relativ zum Stamm-Stacking-Kontext berechnet (zusammen mit den grünen und rosa Kästchen). Daher verschränkt sich der orangefarbene Rahmen mit den rosa und grünen Feldern.
Weitere Informationen zu den Kriterien für die Erstellung von Stapelkontexten und zum Verhalten von Stapelkontexten im Allgemeinen finden Sie in diesem MDN-Artikel. Im Beispiel wurde der blauen Box in der rechten Version immer ein eigener Stapelkontext zugewiesen, da ihre Deckkraft kleiner als 1 ist. Die vorgenommene Verhaltensänderung fügt ein weiteres Kriterium für die Erstellung eines separaten Stapelkontexts hinzu, nämlich ein Element, das position:Fixed ist.
Tests und die Zukunft
Wenn du testen möchtest, ob sich deine Seite ändert, öffne die about:flags von Chrome und aktiviere oder deaktiviere die Option „Elemente mit fester Position erstellen Stapelkontexte“. Wenn sich Ihr Layout in beiden Fällen gleich verhält, sind Sie fertig. Falls nicht, prüfe, ob es für dich akzeptabel erscheint, wenn dieses Flag aktiviert ist, da dies die Standardeinstellung in Chrome 22 ist.
Durch diese Änderung wird eine Funktion entfernt: Sie besteht jetzt in der Möglichkeit, Inhalte in einer Unterstruktur des Typs position:Fixed mit nicht scrollbaren Inhalten von außerhalb zu verschachteln. Es ist unwahrscheinlich, dass Webentwickler dies absichtlich tun. Derselbe Effekt lässt sich erzielen, wenn mehrere „position:Fixed“-Elemente den verschiedenen Teilen des DOMs zugewiesen werden. Betrachten Sie dazu die folgenden beiden Beispiele:
https://codepen.io/wiltzius/pen/gcjCk
Auf dieser Seite wird versucht, zwei untergeordnete „div“-Elemente (overlayA und OverlayB) eines „position:Fixed“-Elements zu verwenden und eines über oder unter einem separaten „div“-Element mit dem Inhalt zu platzieren. Dies ist jetzt nicht mehr möglich, da das „position:Fixed“-Element sein eigener Stapelkontext ist und sich (mit allen untergeordneten Elementen) entweder vollständig über oder vollständig unter dem „div“-Element „content“ und in Chrome 2 befindet.
Um dies zu beheben, können die beiden Overlays in ihre eigenen position:Fixed-Elemente unterteilt werden. Jedes ist ein eigener Stapelkontext, von dem einer über dem „div“-Element des Inhalts und eines unter dem „div“-Element des Inhalts platziert werden kann. Das feste Beispiel funktioniert in Chrome 21 und 22:
https://codepen.io/wiltzius/pen/vhFzG
Der Ursprung dieses Beispiels ist die unnötige Hixie.
Chrome ist der erste Desktop-Browser, bei dem für position:fixierte Elemente eigene Stapelkontexte erstellt werden. Der relevante Standard ist die CSS-Z-Index-Spezifikation (z.B. https://www.w3.org/TR/CSS21/zindex.html). Es gibt noch kein Konsens darüber, was mit dem Unterschied zwischen mobilen und Desktop-Browsern zu tun ist, aber aufgrund der Verwirrung, dass es auf Mobilgeräten und Desktop-Computern zwei unterschiedliche Verhaltensweisen gibt, hat Chrome beschlossen, dieses eine Verhalten vorerst auf beiden Plattformen zu verwenden.
Aktualisiert am 1. Oktober 2012:In der ursprünglichen Version dieses Artikels wurde darauf hingewiesen, dass die CSS-Spezifikation z-index bereits geändert wurde, um das neue Verhalten der Funktion „Position: feste Elemente“ widerzuspiegeln. Dies ist ungenau. Sie ist in der www-Stilliste erörtert, aber die Spezifikation wurde bisher noch nicht geändert.