简单的lightbox里的z-index问题？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title> New Document </title>

<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">

<style type="text/css">
.black_overlay{
display:none;
position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
background-color:black;
z-index:1001;
opacity:0.70;
} .white_content{
display:none;
top:30%;
left:30%;
width:40%;
height:40%;
padding:16px;
border:16px solid orange;
background-color:white;
z-index:1002;
overflow:auto;
} </style> </head> <body>
<h3>lightbox演示</h3>
<p>观看效果<a href="JavaScript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'; "> 请单击这里 </a></p>


<div id="light" class="white_content">这里是lightbox的弹出内容<a  href="JavaScript:void(0)"onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'; ">关闭</a>
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
。。应该是z-index的问题1002>1001啊。。可是在chrome里黑色那1001层盖住了提示框的1002那层。why？初学者谢谢您啦