Wenn mehrere untergeordnete Elemente in einem übergeordneten Element gleichzeitig positioniert werden, kann es zu Überlappungen zwischen positionierten Elementen kommen, wie in Abbildung 1 dargestellt.
Wir wissen, dass das vom Monitor angezeigte Muster eine zweidimensionale Ebene ist, wobei die x-Achse und die y-Achse zur Darstellung der Positionsattribute verwendet werden. Um das Konzept dreidimensionaler Körper auszudrücken, wie beispielsweise die dreidimensionale Beziehung zwischen der oberen und unteren Schicht in der Abbildung oben, wird das Z-Index-Attribut eingeführt, um die Tiefe der Z-Achse darzustellen. Der Z-Index-Wert kann die Stapelreihenfolge der positionierten Elemente in der Richtung senkrecht zum Anzeigebildschirm (Z-Achse) steuern. Wenn sich Elemente mit einem großen Wert überlappen, liegen sie über Elementen mit einem kleinen Wert. Der Wert kann eine positive Ganzzahl, eine negative Ganzzahl oder 0 sein. Der Standardwert ist 0.
Der Z-Index kann nur für Elemente wirksam sein, deren Positionsattributwert relativ, absolut oder fest ist. Die Z-Achse kann als Tiefe des Bildschirms verstanden werden. Elemente mit größeren Z-Indexwerten liegen näher am Benutzer.