代碼示例一、
<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="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" onClick="changes('Layer1')">連結1</a> <a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 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的值，文本就被覆寫看不到了。
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)