jQuery chilltime test

test

by jashet villegas

HTML

<!DOCTYPE html>
<html>
  <body> 
  <div class="container_big">
      <div class="box_listener red"></div>
     
      <div class="box_listener blue"></div>
      
      <div class="box_listener green"></div>        
   </div>
  </body>
</html>

CSS

body {
  width: 400px;
  height: 200px;
}
.container_big{
  width: 400px;
  height: 200px;
  border-style: solid;
  border-color: black; 
  background-color: lightblue;
}
.box_listener{
  position:relative;
  z-index:1;  
}
.red{
  width: 120px;
  height: 120px;
  margin-left: 260px;
  margin-top: 20px;
  background-color: white;
  border-style: solid;
  border-color: red;
  position: absolute;
  z-index:0;
}
.blue{
  width: 120px;
  height: 120px;
  margin-left: 220px;
  margin-top: 40px;
  background-color: white;
  border-style: solid;
  border-color: blue;
  position: absolute;
}
.green{
  width: 120px;
  height: 120px;
  margin-left: 200px;
  margin-top: 60px;
  background-color: white;
  border-style: solid;
  border-color: green;
  position: absolute;
}

JavaScript

var boxes = $("box_listener");
    boxes.click(function() {
        var clicked = $(this),
            max = 0;
        boxes.each(function() {
            var z = parseInt( $( this ).css( "z-index" ), 10 );
            max = Math.max( max, z );
        });
        clicked.css("z-index", max + 1 );
    });