<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script type="text/javascript">
var index=1; //初始化点击层的z-index
function show(div)
{
div.style.zIndex=index++; //显示后index加1
}
</script>
</head>
<body>
<div style="width: 300px; position: absolute; left: 20px; top: 300px; height: 500px;">
<div style="position: absolute; width: 100px; height: 200px; background-color: Red;"
οnclick="show(this)">
</div>
<div style="position: absolute; width: 300px; height: 100px; background-color: black;"
οnclick="show(this)">
</div>
<div id="Layer1" οnclick="show(this)" style="position: absolute; left: 86px; top: 36px;
width: 376px; height: 295px; background-color: #CCCCCC;">
</div>
<div id="Layer2" οnclick="show(this)" style="position: absolute; left: 194px; width: 407px;
height: 315px; background-color: #0066FF;">
</div>
</div>
</body>
</html>
代码示例二、
<div id="Layer1" style="position:absolute;
left:186px;
top:96px;
width:376px;
height:295px;
background-color: #CCCCCC;"></div>
<div id="Layer2" style="position:absolute;
left:294px;
top:34px;
width:407px;
height:315px;
background-color: #0066FF;"></div>
<a href="#" onClick="changes('Layer1')">链接1</a> <a href="#" onClick="changes('Layer2')">链接2</a>
<script type="text/javascript">
var es = 1; //初始化点击层的z-Index
function changes(ts){
var obj = document.getElementById(ts);
obj.style.zIndex = es;
es++ ; //显示后z-Index加1
}
</script>
代码示例三、来源：http://www.w3schools.com/Css/tryit.asp?filename=trycss_zindex
<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>
因为图片的z-index值设置为-1，所以图片显示在文字的后面，设置为大于或等于0的值，文本就被覆盖看不到了。
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
