z-index Attribute | zIndex Property

Sets or retrieves the stacking order of positioned objects.

Syntax

HTML { z-index: vOrder }

Scripting object.style.zIndex [ = vOrder ]

HTML	{ z-index: vOrder }
Scripting	object.style.zIndex [ = vOrder ]

Possible Values

vOrder Variant that specifies one of the following values:

auto 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 is read/write with a default value of auto; the cascading style sheets (CSS) attribute is not inherited.
Expressions can be used in place of the preceding value(s), as of Microsoft® Internet Explorer 5. For more information, see Dynamic Properties.

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.

Example

The following examples use the z-index attribute and the zIndex property to change the stacking order of objects.

This example uses an inline style sheet to set the stacking order.

Sample Code
<IMG SRC="cone.jpg" STYLE="position:absolute; 
    top:100; left:100; z-index:4">
<DIV STYLE="position:absolute; top:100; left:100;
    color:red; background-color:beige; font-weight:bold; 
    z-index:1">
. . . </DIV>
This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

This example uses inline scripting to set the stacking order.
<IMG ID="cone" SRC="cone.jpeg"
    STYLE="position:absolute;top:10px;left:10px;"
    onclick="cone.style.zIndex=1; sphere.style.zIndex=2">
<IMG ID="sphere" SRC="sphere.jpg"
    STYLE="position:absolute;top:1px;left:1px;"
    onclick="cone.style.zIndex=2; sphere.style.zIndex=1">
This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

Applies To

[ Object Name ]

Platform Version

Win16:

Win32:

Mac:

Unix:

WinCE:

Version data is listed when the mouse hovers over a link, or the link has focus.

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, currentStyle, custom, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, I, 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, ISINDEX, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, runtimeStyle, S, SAMP, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP