jQueryUI: Sortable <thead> messes up ie ANY IE when TABLE's css display property is set to RELATIV

Question

As the title describes most of the problem. Here is the example code that works as expected in Firefox. Could someone provide a workaround or fix? In action

JavaScript

$(function()
  {
    $('table thead').sortable({
      items: 'th',
      containment: 'document',
      helper: 'clone',
      cursor: 'move',
      placeholder: 'placeHold',
      start: function(e, ui) {
        $overlay=$('<div>').css({ position: 'fixed', left: 0, top: 0, backgroundColor: 'black', opacity: 0.4, width: '100%', height: '100%', zIndex: 500 }).attr('id','sortOverlay').prependTo(document.body);
        $(this).parent().css({ position: 'relative', zIndex: 1000});
      },
      stop: function(e, ui){
        $('#sortOverlay').remove();
        $(this).parent().css({ position: 'static' });
    }
    });
});

CSS

<style type="text/css">
  table {
    background-color: #f3f3f3;
  }
  table thead {
    background-color: #c1c1c1;
  }
  .placeHold {
    background-color: white;
  }
</style>

HTML

<table>
    <thead><th>th1</th><th>th2</th><th>th3</th><th>th4</th></thead>
    <tbody>
      <tr>
        <td>content</td><td>content</td><td>content</td><td>content</td>
      </tr>
    </tbody>
  </table>