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 id="example1" class="divcss5-1">1</div>
 <div id="example2" class="divcss5-2">2</div>

<style type="text/css">
    .divcss5-1{position:absolute;top:10px;left:40px;width:100%;height:20%;background-color:#ccc;z-index:1;}    
    .divcss5-2{position:absolute;top:10px;left:40px;width:100%;height:20%;background-color:#eee;z-index:2;}</style>

第二种方法，用的js，点击div2后可以让1覆盖2：

<div id="example1" class="divcss5-1">1</div>
<div id="example2" class="divcss5-2" onclick="aa()">2</div>

<style type="text/css">
    .divcss5-1{position:absolute;top:10px;left:40px;width:100%;height:20%;background-color:#ccc;visibility:none;}    
    .divcss5-2{position:absolute;top:10px;left:40px;width:100%;height:20%;background-color:#eee;}</style><script type="text/javascript">
    function aa(){
        alert("从1隐藏2显示到2隐藏1显示");        var a1=document.getElementById("example1");       
         var a2=document.getElementById("example2");
        a1.style.visibility="visible";
        a2.style.visibility="hidden";
    }</script>