z-index Attribute | zIndex Property

MS Office DHTML, HTML & CSS

 
Click to return to the DHTML, HTML & CSS home page    
y Property     DHTML Properties    

z-index Attribute | zIndex Property


Sets or retrieves the stacking order of positioned objects.

Syntax

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

Possible Values

vOrder Variant that specifies one of the following values:
autoString that specifies the stacking order of the positioned objects based on the order in which the objects appear in the HTML source.
orderInteger 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 propertiesInternet Link.

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.
Microsoft Internet Explorer

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.
Microsoft Internet Explorer

Applies To

[ Object Name ]
PlatformVersion
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

Back to topBack to top

Did you find this topic useful? Suggestions for other topics? write us!Internet Link

© 1999 microsoft corporation. all rights reserved. terms of useInternet Link.