z-index Attribute | zIndex Property

Sets or retrieves the stacking order of positioned objects.

Syntax

HTML	{ z-index: "auto" | sOrder }
Scripting	object.style.zIndex [ = sOrder]

Possible Values

auto	Bottom-to-top stacking in the order that the objects for which z-index is set appear in the HTML source.
sOrder	String specifying the order as an integer or as "auto".

The property is read/write with a default value of auto; the CSS attribute 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.

Example

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

The sample below uses an inline style sheet to set the stacking order.

Sample Code

<IMG SRC="cone.jpeg" 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.

The sample below 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.jpeg"
    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

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, currentStyle, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, HTMLAREA, I, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=hidden, 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

Does this content meet your programming needs? Write us!

Back to top