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 ändert sich die Stapelreihenfolge einiger Seiten, was zu einer Beschädigung des Seitenlayouts führen kann. Das neue Verhalten entspricht dem Verhalten von WebKit-Browsern auf Mobilgeräten (iOS Safari und Chrome für Android).
Was wird gestapelt?
Jeder kennt und liebt das z-index zum Festlegen der Tiefensortierung von Elementen auf einer Seite. Nicht alle Z-Indexe sind jedoch gleich: Der z-index eines Elements bestimmt nur seine Reihenfolge relativ zu anderen Elementen im selben Stapelkontext. Die meisten Elemente auf einer Seite befinden sich in einem einzigen Stamm-Stapelkontext. Elemente, die absolut oder relativ positioniert sind und keine automatischen z-index-Werte haben, bilden jedoch eigene Stapelkontexte. Das bedeutet, dass alle untergeordneten Elemente innerhalb des übergeordneten Elements in Z-Reihenfolge angeordnet werden und nicht mit Inhalten außerhalb des übergeordneten Elements verschachtelt werden. Ab Chrome 22 erstellen position:fixed-Elemente auch eigene Stapelkontexte.
Eine allgemeine Übersicht über Stapelkontexte finden Sie in diesem MDN-Artikel.
Vergleichen Sie position:fixed mit dem Attribut „new position:sticky“: position:sticky erstellt immer einen neuen Stapelnkontext.
Motivation
Mobile Browser (Mobile Safari, Android-Browser, Qt-basierte Browser) platzieren Elemente mit position:fixed seit einiger Zeit (z. B. seit iOS 5 und Android Gingerbread) in eigenen Stapeln, da dies bestimmte Scroll-Optimierungen ermöglicht und Webseiten für Touchbedienung viel reaktionsfähiger macht. Die Änderung wird aus drei Gründen auf dem Computer eingeführt:
- Ein unterschiedliches Rendering-Verhalten in Browsern für Mobilgeräte und Computer ist ein Stolperstein für Webautoren. CSS sollte nach Möglichkeit überall gleich funktionieren.
- Bei Tablets ist nicht klar, welcher der Algorithmen zum Erstellen von Stapelkontexten für Mobilgeräte oder Computer besser geeignet ist.
- Die Optimierung der Scrollleistung von Mobilgeräten auf Computer zu übertragen, ist sowohl für Nutzer als auch für Autoren von Vorteil.
Details zur Änderung
Hier ist ein Beispiel für die verschiedenen Layouts: https://codepen.io/paulirish/pen/CgAof
Nach der Änderung werden beide Versionen wie die rechte Version gerendert.
In diesem Beispiel hat das grüne Feld einen z-index: 1, das rosafarbene Feld einen z-index: 3 und das orangefarbene Feld einen z-index: 2. Das blaue Feld ist ein Vorfahr des orangefarbenen Felds und hat position:fixed.
Wenn das blaue Feld einen eigenen Stapelstapel erhält, wird die z-index des orangefarbenen Felds relativ zum Stapelstapel des blauen Felds berechnet. Da das blaue Feld eine z-index von auto hat, was ihm eine Stapelebene von null im Stammstapelkontext verleiht, landet das orangefarbene Feld hinter den grünen und rosafarbenen Feldern, die im Stammkontext die Z-Indexe 1 und 3 haben.
Wenn das blaue Feld keinen eigenen Stapelnkontext erhält, wird die z-index des orangefarbenen Felds (zusammen mit den grünen und rosafarbenen Feldern) relativ zum Stamm-Stapelkontext berechnet. Daher wird das orangefarbene Feld mit den rosa und grünen Feldern überlappt.
Weitere Informationen zu den Kriterien für die Erstellung von Stapelkontexten und zum Verhalten von Stapelkontexten im Allgemeinen finden Sie in diesem MDN-Artikel. In diesem Beispiel hat die rechte Version dem blauen Feld immer einen eigenen Stapelkontext gegeben, da seine Deckkraft unter 1 liegt. Durch die Verhaltensänderung wird effektiv ein weiteres Kriterium für die Erstellung eines separaten Stapels hinzugefügt, nämlich ein Element mit der Position „position:fixed“.
Tests und die Zukunft
Wenn Sie testen möchten, ob sich Ihre Seite ändert, klicken Sie in Chrome auf das Dreistrich-Menü about:flags und aktivieren oder deaktivieren Sie „Elemente mit fester Position erstellen Stapelkontexte“. Wenn sich Ihr Layout in beiden Fällen gleich verhält, ist alles in Ordnung. Andernfalls prüfen Sie, ob das Aussehen mit aktiviertem Flag für Sie akzeptabel ist, da dies in Chrome 22 standardmäßig der Fall sein wird.
Durch diese Änderung wird eine Funktion entfernt: die Möglichkeit, Inhalte innerhalb eines untergeordneten Elements mit „position:fixed“ mit nicht scrollbaren Inhalten von außen zu verschachteln. Es ist unwahrscheinlich, dass Webentwickler dies absichtlich tun. Derselbe Effekt kann auch erzielt werden, indem mehreren Elementen mit der Positionierung „position:fixed“ verschiedene DOM-Bereiche 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 Elements mit der Positionierung „position:fixed“ über einem separaten Inhalts-div und einem darunter zu platzieren. Das ist jetzt nicht mehr möglich, da das Element mit der Positionierung „position:fixed“ einen eigenen Stapelnkontext bildet und es (zusammen mit allen untergeordneten Elementen) entweder vollständig über oder vollständig unter dem Inhalts-div angezeigt wird. Hinweis: Dieses Beispiel funktioniert in Chrome 21 und niedriger, aber nicht mehr in Chrome 22.
Um das zu beheben, können die beiden Overlays in eigene position:fixed-Elemente unterteilt werden. Jedes Element hat einen eigenen Stapelstapel, von denen eines über dem Inhalts-Div und eines darunter liegen kann. Sehen Sie sich das fehlerfreie Beispiel an, das in Chrome 21 und 22 funktioniert:
https://codepen.io/wiltzius/pen/vhFzG
Die Idee zu diesem Beispiel stammt von dem unverwechselbaren hixie.
Chrome ist der erste Desktop-Browser, bei dem Elemente mit der Positionierungsanweisung „position:fixed“ eigene Stapelkontexte erstellen. Der relevante Standard ist die CSS-Z-Index-Spezifikation (siehe z.B. https://www.w3.org/TR/CSS21/zindex.html). Es gibt noch keine Einigkeit darüber, wie mit dem Unterschied zwischen mobilen und Desktop-Browsern umgegangen werden soll. Angesichts der Verwirrung, die durch zwei unterschiedliche Verhaltensweisen auf Mobilgeräten und Computern entsteht, hat sich Chrome jedoch entschieden, vorerst auf beiden Plattformen auf dieses einheitliche Verhalten umzustellen.
1. Oktober 2012:In der ursprünglichen Version dieses Artikels wurde behauptet, dass die CSS-z-index-Spezifikation bereits geändert wurde, um das neue Verhalten von Elementen mit der Positionierung „position: fixed“ widerzuspiegeln. Das ist falsch. Das Thema wurde in der Liste der www-Stile diskutiert, aber es wurden noch keine Änderungen an der Spezifikation vorgenommen.