What is "z-index"

z-index represents the order on the z plane in which an element appears. An element with larger stacking order is always in front of another element with smaller stacking order. This property is available in most Graphical User Interface libraries (both for Web and Desktop).

In the CSS -

z-index is a CSS property that assigns the order of stacking specific elements.

p {
    position: relative;
    z-index: -1;
}

Negative stack orders can also be used in the same way. A negative value will appear behind a more positive one. z-index functions only on elements that have a value position (ex.: position: relative;). Like any CSS property, it can also be assigned via Javascript through the following syntax:

object.style.zIndex="1"

In the WPF -

Attached Property Panel.Zindex

At Silverlight -

Attached Property Canvas.Zindex


Tag use

This tag can be used in questions related to the correct positioning of graphic elements so that - if there is overlap - the developer can control which one obscures the other, with the aid of this property (or equivalent functionality). The z-index refers exclusively to 2D graphical interfaces, so this tag should not be used to refer to the layout of 3D elements in its Z-axis.