z-index

Sets the stacking order of positioned objects.

Syntax

{ z-index: vOrder}

Possible values

vOrder

Variant that specifies or receives one of the following values:

auto

Default. String that specifies the stacking order of the positioned objects based on the order in which the objects appear in the HTML source.

order

Integer that specifies the position of the object in the stacking order.

The property has a default value of auto. It is not inherited.

Remarks

Positive z-index values are positioned above a negative (or lesser-value) z-index. Two objects with the same z-index are stacked according to source order. A positive value positions the element above text that has no defined z-index, and a negative value positions it below. Set this parameter to null to remove the property.

The z-index property applies only to objects that have the position property set to relative or absolute.

The property does not apply to windowed controls, such as select objects.

Input from a pointing device, such as a mouse, does not penetrate through overlapping elements even if the elements are not visible. This is also true for positioned elements with a negative z-index unless:

  • The parent is a scrolling container (that is, its overflow property is set to auto or scroll).

  • The parent is positioned (that is, its position property is set to absolute, relative, or fixed).

Examples

The following example uses the z-index property to change the stacking order of objects. This example uses an inline style sheet to set the stacking order:

<img src="cone.jpg" style="position:absolute; 
    top:100px; left:100px; z-index:4"/>
<div style="position:absolute; top:100; left:100;
    color:red; background-color:beige; font-weight:bold; 
    z-index:1">
. . . </div>

Standards information

This property is defined in Cascading Style Sheets (CSS), Level 2 (CSS2) Ee371174.xtlink_newWindow(en-us,Expression.40).png.

Applies to

a, abbr, acronym, b, bdo, big, blockquote, body, button, caption, center, cite, code, custom, dd, defaults, del, dfn, div, dl, dt, em, embed, fieldset, font, form, hn, hr, i, iframe, img, input type=button, input type=checkbox, input type=file, input type=image, input type=password, input type=radio, input type=reset, input type=submit, input type=text, ins, li, object, ol, p, q, s, span, sub, table, td, th, tt, u, ul, var, xmp

See also

Concepts

position

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.