title: jQuery - z-index manipulation & auto value instead number
body: <p>When you clik on <code>add new</code> button, jQuery inserts new <code>dragrable DIVs</code> to the <code>CONTAINER</code>. When I click on some of this <code>DIVs</code>, I want to change <code>z-index</code> value. But jQuery can't get z-index value as a number. It shows just <code>'auto'</code>... Is there solution to show true z-index value and <code>increase it by 1</code> ?</p>
  
  <p>jsFiddle Example - <a href="http://jsfiddle.net/ynternet/84nVQ/10/" rel="nofollow">http://jsfiddle.net/ynternet/84nVQ/10/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="add" style="background:yellow; width:100px;"&gt; add new &lt;/div&gt;
  &lt;div id="container"&gt; &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>function handler() {
      if ($(this).find("#menu").length) {
          return;
      }
      var currentIndex = $(this).css('z-index');
      alert(currentIndex);
      var newIndex = currentIndex + 1;
      alert(newIndex);
      $(this).css('z-index', newIndex);
  }
  $("#add").on({
      click: function(e) {
          var timestamp = Date.now();
          var posx = Math.floor(Math.random() * 400);
          var posy = Math.floor(Math.random() * 400);
          $('#container').append(function() {
              return $('&lt;div class="add_to_this" id="' + timestamp + '" style="left:' + posx + 'px; top:' + posy + 'px; "&gt;Click me, drag a change z-index&lt;/div&gt;').click(handler).draggable({
                  containment: "#container",
                  scroll: false,
                  cursor: 'lock'
          });
      });
      }
  });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#container {
      width:500px;
      height:500px;
      background: palegoldenrod;
      position: relative;
      top:20px;
      left: 100px;
      padding: 0px;
  }
  .add_to_this {
      padding:5px;
      background:yellowgreen;
      position: absolute;
      display:inline-block;
      width:200px;
      height:50px;
      -moz-user-select: none;
      -khtml-user-select: none;
      -webkit-user-select: none;
      user-select: none;
      -o-user-select: none;
  }
  </code></pre>