CSS Properties Index   Positioning Properties

---

Sets or retrieves the stacking order of positioned objects.

CSS	{ z-index: auto | order }
Script	object.style.zIndex = auto | order

auto	Default. Sets the stack order equal to its parent container.
order	Integer specifying the stacking order of the object.

The property is read/write with a default value of auto; the CSS attribute is not inherited.

The z-index property specifies the stacking order of a positioned element.

z-index is specified as either the keyword auto or an integer specifying the object’s stack level.

Positive z-index values are positioned above or in front of a negative ( or lesser value ) z-index.

Overlapping elements with a higher z-index cover those with a lower index.

Two objects with the same z-index are stacked according to the document source order.

NOTE: z-index works only on positioned elements ( position: absolute, position: relative, position: fixed, or position: sticky )

The sample below uses calls to an embedded stylesheet to dynamically set an element’s z-index attribute via a class change.

<img id="img1" src="sampleImage1.jpg" class="z1"
   onclick="this.className='z1'; img2.className='z2'" 
   width=500 border=0 alt="">
<img id="img2" src="sampleImagew.jpg" class="z2"
   onclick="this.className='z1'; img1.className='z2'" 
   width=500 border=0 alt="">

 Show me 

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

<img id="img1" src="../shared/images/samp03.jpg" 
   onclick="img1.style.zIndex=1; img2.style.zIndex=2" 
   width=200 border=0 alt="">
<img id="img2" src="../shared/images/samp14.jpg"
   onclick="img1.style.zIndex=2; img2.style.zIndex=1" 
   width=200 border=0 alt="">

 Show me