CSS2 » Properties » z-index
Version: Level 2
Compability: IE4+ N6
- Syntax:
- z-index : auto | number
- 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.
- auto
- The auto value sets the stacking order number to the value of the parent element.
The z-index property sets the stacking order for a group of elements whose x/y coordinates overlap the same area. This property is not inherited.
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).
Examples
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:
Guru
Dev
Language(s): CSS2
See Also:
