CSS Attributes Index   Positioning Properties

---

Sets or retrieves the stacking order of positioned objects.

CSS	{ z-index: 'auto' | sOrder }
Script	object.style.zIndex = sOrder ]

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.

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.

The sample below uses inline styles to set the z-index attribute, or stacking order of elements on a page.

<img src="sample.jpg" style="z-index:1">
<div style="z-index:2"> . . . </div>

This feature requires Microsoft^® Internet Explorer^® 4.0 or later.

 Show me 

The sample below uses inline event handlers to dynamically set an object’s zIndex property on mouse events.

<img id="img1" src="samp1.jpg"
  style="position:absolute; top:10px; left:10px;"
  onclick="img2.style.zIndex=1; img1.style.zIndex=2">

This feature requires Microsoft^® Internet Explorer^® 4.0 or later.

 Show me