div的替换,用了z-index，为什么不成功，帮忙看一下？

Question

<div id="example1" class="divcss5-1"></div>
 <div id="example2" class="divcss5-2></div>

<script type="text/css">
.divcss5-1{width:100%;height:20%;margin-left: 40px;margin-top: 10px;z-index:1;}
.divcss5-2{width:100%;height:20%;margin-left: 40px;margin-top: 10px;z-index:2;}
</script>

Answer 1

第一种方法：<div&nbsp;id="example1"&nbsp;class="divcss5-1">1</div> &nbsp;<div&nbsp;id="example2"&nbsp;class="divcss5-2">2</div><style&nbsp;type="text/css"> &nbsp;&nbsp;&nbsp;&nbsp;.divcss5-1{position:absolute;top:10px;left:40px;width:100%;height:20%;background-color:#ccc;z-index:1;}&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;.divcss5-2{position:absolute;top:10px;left:40px;width:100%;height:20%;background-color:#eee;z-index:2;}</style>第二种方法，用的js，点击div2后可以让1覆盖2：<div&nbsp;id="example1"&nbsp;class="divcss5-1">1</div> <div&nbsp;id="example2"&nbsp;class="divcss5-2"&nbsp;onclick="aa()">2</div><style&nbsp;type="text/css"> &nbsp;&nbsp;&nbsp;&nbsp;.divcss5-1{position:absolute;top:10px;left:40px;width:100%;height:20%;background-color:#ccc;visibility:none;}&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;.divcss5-2{position:absolute;top:10px;left:40px;width:100%;height:20%;background-color:#eee;}</style><script&nbsp;type="text/javascript"> &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;aa(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("从1隐藏2显示到2隐藏1显示");&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;a1=document.getElementById("example1");&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;a2=document.getElementById("example2"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a1.style.visibility="visible"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a2.style.visibility="hidden"; &nbsp;&nbsp;&nbsp;&nbsp;}</script>