Toggle class

JavaScript
6 
<style>
.box1{float:left; background-color:#CCC; width: 100px; height: 100px; padding:10px;text-align:center; }
.myBox{float:left; background-color: #0c0; z-index:9999; box-shadow: 1px 1px 5px #888888; height:200px; width:200px; z-index:10;}
</style>
</head>


<div id="boxgroup">
<div class="box1" onclick="toggleclass(this)">Box with active class</div>
<div class="box1" onclick="toggleclass(this)">Box with active class</div>
<div class="box1" onclick="toggleclass(this)">Box with active class</div>
<div class="box1" onclick="toggleclass(this)">Box with active class</div>
</div>
<script>
function toggleclass(el){
var hbox = document.getElementById('boxgroup').children;
for(var i=0; i<hbox.length; i++){
    hbox[i].className= "box1";
    }
   el.classList.add('myBox');
}
</script>

Regarding on the above code, onclicking i am increasing the boxes width and height by 100px and adding shadow, if you clearly observed that though i had given z-index property , it’s not popping out over the other boxes and also how can we increase the width and height from the middle of the box which should not effect the current box places.