title: jQuery UI draggable not working properly in IE7. Works in IE8
body: <p>I have an issue with IE7 where the jQuery UI draggable is showing underneath the droppable instead of on top of it when dragging. The droppable is also a draggable.
  The page works fine in IE8 and other browsers. I tried quirks and standards mode in IE7. Both experience the issue.</p>
  
  <p>The droppable consists of two div's on top of each other, one shifted from the other using position jQuery utility function. The draggable should show on top of both.
  The z-index of the draggable is set to a very high value to ensure it's on top of anything on the page. As a test during dragging I am setting and displaying the z-index of the div's in the droppable &amp; the draggable and confirmed that the draggable has the highest z-index. </p>
  
  <p>After some troubleshooting it seems <code>"position:relative"</code> is the culprit. When I remove the position function, the draggable shows on top. However I need it to position a few elements properly, specially the two div's which are on top of each other.</p>
  
  <p>Is there a workaround for this issue?</p>
  
  <p>(My html is quite complex to show here.)</p>
  
  <pre><code>**Addition:**
  </code></pre>
  
  <p>I tried positioning with position:absolute instead of using position(). Still no go.</p>