title: KineticJS Z-Index doesnt apply
body: <p>Hi stackoverflow community</p>
  
  <p>I'm trying to layer images by using KineticJS. Unfortunatly it does not work.
  Like you see in the code snippet i'm setting the Z-Index of two pictures, when i log them they're still in the same order.
  You can see the function <code>startClouds(field)</code>. This function creates clouds with a Z-Index of 2, what actually works. Im trying to fix that since an hour and i really have no idea why its not working.</p>
  
  <pre><code>var title = new Image();
  var title_p = new Image();
  title.src = '/test/images/title_bg.png';
  title_p.src = '/test/images/title_pic.png';
  
  title.onload = function(){
      var title_background = new Kinetic.Image({
          x: 0,
          y: 0,
          image: title
      });
      field.add(title_background);
      title_background.setZIndex(1);
      field.draw();
      console.log('Z-Index of background: '+title_background.getZIndex());
  
      var title_pic = new Kinetic.Image({
          x: 0,
          y: 0,
          image: title_p
      });
      field.add(title_pic);
      title_pic.setZIndex(3);
      field.draw();
      console.log('Z-Index of Title: '+title_pic.getZIndex());
  
      startClouds(field);
  
      var start = new Kinetic.Text({
          x: 240,
          y: 160,
          text: '[Press Any Key to Start]',
          fontSize: 22,
          fontFamily: 'Calibri',
          fill: 'white'
      });
      field.add(start);
      field.draw();
      stage.add(field);
  }
  </code></pre>
  
  <p>Thx for the help straight ahead</p>