title: z-index order for draggable div
body: <p>I want to create draggable a media player (blue box in my example) in my website and I need to put media player in front of all divs. How can i do this?</p>
  
  <p>My page template is like that:</p>
  
  <p>You can try it: <a href="http://jsfiddle.net/krMhY/" rel="nofollow">http://jsfiddle.net/krMhY/</a></p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;  
      &lt;title&gt;Popup Test&lt;/title&gt;
  
  
      &lt;script src="js/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.ui.full.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;style type="text/css"&gt;
          .contents
          {position:fixed; bottom:0; left: 0; right:0; top:100px;}
  
          .resizableArea
          {position:absolute; bottom:0; top:0; width:100%;}
  
          .resizableArea .leftSection
          {position:relative; float:left; width: 150px; height:100%;}
  
          .resizableArea .splitter
          {position: absolute; left: 150px; width: 4px; height: 100%;}
  
          .resizableArea .rightSection
          {position: relative; overflow: auto; height: 100%;}    
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body                               style="z-index: 1; background-color: purple;"&gt;
      &lt;div class="contents"             style="z-index: 2; background-color: black;"&gt;
          &lt;div class="resizableArea"    style="z-index: 3; background-color: aqua;"&gt;
              &lt;div class="leftSection"  style="z-index: 4; background-color: yellow;"&gt;&amp;nbsp;&lt;/div&gt;
              &lt;div class="splitter"     style="z-index: 7; background-color: green;"&gt;&amp;nbsp;&lt;/div&gt;
              &lt;div class="rightSection" style="z-index: 6; background-color: red;"&gt;&amp;nbsp;&lt;br /&gt;
                  &lt;div id="drag"        style="z-index: 8; background-color: blue; width: 100px; height: 100px;"&gt;&amp;nbsp;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script language="javascript" type="text/javascript"&gt;
          $("#drag").draggable();
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks all...</p>