PROPERTY: z-index
z-index : auto | number
 
Compatibility:  IE4+  N6
Version: Level 2
Inherited: No
 
The z-index property sets the stacking order for a group of elements whose x/y coordinates overlap the same area.
 
Elements can have 3-dimensions. The x- and y-components set the element position as viewed on the monitor. The z-component determines which elements can appear to lie on top of other elements, or conversely, which elements appear to lie under other elements.
 
The higher (or more positive) the number, the higher the element is in the stacking order. Higher numbered elements overlay lower numbered elements (2 overrides 1).
 
auto
 
The auto value sets the stacking order number to the value of the parent element.
 
number
 
The number value can be zero, a positive integer, or a negative integer. This sets the local stacking order. An element with a higher number will be in front of all elements with lower numbers.
 
In this example, the blue colored word Dev has a higher z-index and is superimposed on top of the red colored word Guru.
 
Code:
<html>
<head>
<title>z-index example</title>
<style type="text/css">
.logo {
position: absolute;
left: 0.5in;
top: 0.5in;
}
</style>
</head>
<body>

<div id="word1" class="logo" style="z-index: 1">
<br>
<span style="color: red; font-size: 100px;">Guru</span>
</div>

<div id="word2" class="logo" style="z-index: 2">
<span style="color: blue; font-size: 70px;">Dev</span>
</div>

</body>
</html>
 
Output:
Click to see output in separate window
 

Copyright 1999-2001 by Infinite Software Solutions, Inc. All rights reserved.
Trademark Information