Elemente mit Hilfe von von z-index anzuordnen ist eine Maßnahme die es in Ausnahmefällen braucht – wie z.B. bei einem Sticky Header, der stets auf oberster Ebene bleiben soll, sodass die Seitenbereiche unter ihm durchgescrollt werden können. Ggf. muss man nicht gleich mit riesigen Zahlen arbeiten. Vor allem wer z-index sparsam einsetzt, wird meistens bereits bei z-index:1 einen Header bekommen, der sozusagen über den Dingen steht.

Nichtsdestrotrotz bekommt man es manchmal mit Elementen zu tun, die mit höheren Werten aufwarten. In einem Fall war es eine über ein Plugin eingefügte OpenStreetMap, die den Header beim Scrollen überrollte, statt unten durch zu gleiten. Um den Header da drüber zu bringen, musste ich seinen z-index auf einen 4-stelligen Wert setzen. Das machte ich, generierte das CSS neu und spielte die Dateien hoch. Die Map überrollte den Header immer noch, denn der z-index des Headers war nicht der, den ich vorgegeben hatte, sondern 2.

In der Entwicklungsumgebung verwende ich sass und gulp-sass (aufgeteilt in Bereiche mit einer jeweile überschaubaren Anzahl an Zeilen), gulp-concat, gulp-autoprefixer, gulp-rename, gulp-cssnano.

Beim Durchsuchen aller Dateien nach z-index kaum ich drauf, dass der z-index noch korrekt in der style.css war, die aus der Summe der SASS-Dateien gebildet worden war. In der style.min.css, die ich im Theme eingebunden hatte, war der Wert aber 2. Damit war klar, dass gulp-cssnano die Änderung bewirkte. Beim Optimieren der generierte CSS-Datei geht es alle z-index-Werte durch, und nummeriert sie je nach Höhe des Ausgangswerts neu durch. Dabei fängt es mit 1 für den niedrigsten z-index-Wert an (es gab noch einen z-index-Wert in einer anderen SASS-Datei), dann 2, dann 3…

Doch eine Lösung dafür war schnell gefunden, indem beim Ausführen der Gulp-Task bei cssnano die Option {zindex:false} hinzugefügt wird.

.pipe(cssnano({zindex:false}))

Damit werden die in den SASS-Dateien angelegten originalen z-index-Werte bis zur style.min.css durchgeschleust.