Stapelkontext
Unter dem Stapelkontext (englisch: stacking context) versteht man die dreidimensionale Darstellung der gerenderten HTML-Elemente.
Im Normalfall werden HTML Elemente neben- und untereinander angeordnet, ohne sich zu überlappen. Es gibt aber etliche Möglichkeiten, durch CSS Eigenschaften Überlappungen herzustellen. Das kann beispielsweise durch Positionierung geschehen, Anordnung in der gleichen Zelle eines Grids oder durch Transformationen. Sobald eine Überlappung vorliegt, muss der Browser die Frage beantworten, welches Element er an der Überlappungsstelle zeichnen soll. Wenn Transparenzen vorliegen, können das auch mehrere Elemente sein, die korrekt von „unten“ nach „oben“ zu überlagern sind.
Das Modell, das hierfür genutzt wird, ist das des Stapels. Stellen Sie sich vor, dass jedes Element für sich auf eine transparente Folie gezeichnet wird. Dort, wo etwas gezeichnet ist (von Transparenzeffekten einmal abgesehen), kann man nicht hindurchschauen. Diese Folien bilden hinter Ihrem Bildschirm einen Stapel. Und der Browser muss entscheiden, wie diese Folien anzuordnen sind, welche weiter vorne, näher an Ihrem Auge, liegt.
Stellen Sie sich weiter vor, dass einige dieser Folien zusammengeheftet sind. Sie gehören zusammen, und wenn man eine davon im Stapel woanders hinschieben will, muss die ganze Gruppe verschoben werden. Eine solche Foliengruppe nennt man einen Stapelkontext. Und um es nicht zu leicht zu machen, können mehrere solcher Folienhefte wiederum zusammengebunden sein, also einen Stapelkontext mit Unter-Kontexten bilden. Die Anzahl von Unterebenen, die so entstehen können, ist nicht begrenzt.
Wie diese Stapelkontexte entstehen und wie sie geordnet werden, wird im Abschnitt z-index des CSS-Tutorials zu Ausrichtungen beschrieben.
In SVG2 wird es auch für SVG-Elemente einen Stapelkontext geben.
Siehe auch
Weblinks
- W3C: Elaborate description of Stacking Contexts
- MDN: The stacking context
- Philip Walton: What No One Told You About Z-Index
