In „Was zum Teufel, z-index??“ zieht Josh Comeau die Analogie von Ebenengruppen in Designprogrammen wie Photoshop oder Figma zu Stapelkontexten in CSS. Wenn Sie ein Element in einer Ebenengruppe A in Photoshop haben, das sich unter der Ebenengruppe B befindet, gibt es nichts, was Sie tun können, um ein Kind von A über etwas in B zu schieben, außer die gesamte Ebenengruppe A über B zu verschieben oder die Gruppierungen zu entfernen.
Hier ist ein reduzierter Fall
Es gibt keinen z-index-Wert, der dazu führt, dass „Big Thing“ über dem braunen <main>-Element liegt. Aber wie Josh in dem Artikel bemerkt, gibt es eine Vielzahl von Lösungen, wie z. B. die Verhinderung, dass ein Stapelkontext unnötigerweise ausgelöst wird, oder ein wenig DOM-Shuffling, um Dinge zum Funktionieren zu bringen. Wie im obigen Beispiel muss „Big Thing“ kein Kind des Headers sein – und wenn es das nicht wäre, wäre der Stapelkontext nicht so relevant.
Wenn Sie ein Fan von Werkzeugen sind, die Ihnen bei der Diagnose solcher Probleme helfen, lesen Sie Joshs Artikel bis zum Ende, um einige interessante zu finden.