title: jquery-ui datepicker change z-index
body: <p>The problem is pretty straight forward although I'm having a hard time figuring out just how to solve it.</p>
  
  <p>I'm using a jQuery-ui datepicker along with a custom made "ios style on/off toggle". This toggle uses some absolutely positioned elements which are currently showing up on top of my date picker.</p>
  
  <p>see the ugly circle covering july 6th below...</p>
  
  <p><img src="https://i.stack.imgur.com/YPf0g.png" alt="enter image description here"></p>
  
  <p>the dirty way to do this (at least imo) is to write a style in one of my stylesheets, but I'd much rather use some javascript when the picker launches to get this done.</p>
  
  <p>I've already tried </p>
  
  <pre><code>$('.date_field').datepicker(); 
  $('.date_field').datepicker("widget").css({"z-index":100});
  </code></pre>
  
  <p>and </p>
  
  <pre><code>$('.date_field').datepicker({
      beforeShow: function(input, inst) { 
          inst.dpDiv.css({"z-index":100});
      }
  });
  </code></pre>
  
  <p>but it seems the z-index get overwritten each time the datepicker is launched.</p>
  
  <p>any help is appreciated! </p>