Z-index属性决定了一个HTML元素的层叠级别。元素层叠级别是相对于元素在Z轴上（与X轴Y轴相对照）的位置而言。一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部。这个层叠顺序沿着垂直的线轴被呈现。
在一个HTML页面中，自然的层叠顺序（也就是元素在Z轴上的顺序）是由很多因素决定的。下面的是一个列表，它展示的列表项是处于一个层叠环境（stacking context，暂时未找到合适的汉语翻译，应该是指层叠的元素所处的那个层叠的环境）中，这些项是处于这个层叠环境的底部的。这个列表中的项都没有被赋予Z-index属性。
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="Tomi-Eric" />
<meta name="Description" content="Tomi-Eric,练习实例" />
<meta name="author" content="Tomi-Eric" />
<meta name="copyright" content="Tomi-Eric,练习实例" />
<title>简单的XHTML页面</title>
<style type="text/css">
#main{position:relative}
#layer-1,#layer-2,#layer-3,#layer-4,#layer-5{position:absolute;width:500px;height:300px}
#layer-1{top:10px;left:10px;background:#ccc}
#layer-2{top:30px;left:50px;background:#f00}
#layer-3{top:50px;left:100px;background:#ff0}
#layer-4{top:100px;left:150px;background:#f90}
#layer-5{top:150px;left:200px;background:#999}
</style>
<script type="text/javascript">
function reset(){
var select_id="layer-"+$("select_id").value;
$(select_id).style.zIndex+=10;
var div=$("main").getElementsByTagName("div");
showZindex("layer-",div);
}
function $(id){
if(typeof(id)=="string"){
return document.getElementById(id);
}
}
function showZindex(id,div){
for(var i=0;i<=div.length-1;i++){
alert(id+(i+1)+":"+div[i].style.zIndex);
}
}
</script>
</head>
<body>
<select name="select_id" id="select_id">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="button" value="调 整" onclick="reset()">
<div id="main">
<div id="layer-1">layer-1</div>
<div id="layer-2">layer-2</div>
<div id="layer-3">layer-3</div>
<div id="layer-4">layer-4</div>
<div id="layer-5">layer-5</div>
</div>
</body>
</html>