CSS glossary entries for ‘Z’

z-axis: In CSS, ‘layout boxes’ are positioned on three axes: the ‘x-axis’ the ‘y-axis’ and the ‘z-axis’. The x-axis runs horizontally across the screen, the y-axis runs vertically down the screen, and the z-axis runs from the screen towards the user and away from them, i.e. the z-axis gives the impression of a 3rd dimension on what are materially 2-dimensional screens. The z-axis is used for displaying layers and for giving a sense of ‘perspective’ in 3D ‘transforms’.
z-index: The z-index property is a CSS property which sets the position of a CSS ‘layout box’ on the ‘z-axis’ of a visual display, i.e. on given layer nearer to, or further away from, the viewer. z-index values are integers (positive or negative) indicating a level above or below the layer (z-index:0) on which ‘normal flow’ content is rendered by default. Layout boxes are nested, so a layout box with a z-index of 10 can appear below a layout box with a z-index of 2, if any of the first box's ancestors have z-index lower than 2.
zoom: In CSS, the word zoom has different meanings depending on context. In a broad sense, it refers to the capability of browsers to do ‘full page zoom’ and ‘text-only zoom’ or to the tendency for mobile browsers to invoke ‘auto-zoom’. In the narrowest sense, it refers to Microsoft's non-standard zoom property. That property is primarily used by CSS designers to set and reset another non-standard ‘Internet Explorer’ property known as hasLayout. Although the incredibly troublesome ‘hasLayout’ property is no longer easy to set by inadvertently, it still lurks in the ‘compatibility modes’ of recent versions of IE.