title: How to make draggable image to appear always in front inside overflow container
body: <p>I have problem in making my draggable image always in front,
  I have no problem when my container has no overflow style 
  but I need my container to have overflow-x:auto; since I have a lot of image to show:</p>
  
  <p>but when I put overflow-x:auto; when I drag the image it appears at the back of its own container but expanding the overflow..</p>
  
  <p>here is my html:</p>
  
  <pre><code>  &lt;div id="dvSource"&gt;
   &lt;img alt="" name="Cocolate" quantity="1" price="20.99" src="images/flavor/Chocolate.png" /&gt;
                  &lt;img alt="" name="Mint-Chocolate-Chip" quantity="1" price="40.99" src="images/flavor/Mint-Chocolate-Chip.png" /&gt;
                  &lt;img alt="" name="Triple-Tornado" quantity="1" price="20.99" src="images/flavor/Triple-Tornado.png" /&gt;
                  &lt;img alt="" name="Vanilla-Bean" quantity="1" price="50.99" src="images/flavor/Vanilla-Bean.png" /&gt;
                  &lt;img alt="" name="Vanilla" quantity="1" price="30.9" src="images/flavor/Vanilla.png" /&gt;
                  &lt;img alt="" name="Cockies-&amp;-Cream" quantity="1" price="50.96" src="images/flavor/Cockies-&amp;-Cream.png" /&gt;
                  &lt;img alt="" name="Cockies-&amp;-Cream" quantity="1" price="50.96" src="images/flavor/Cockies-&amp;-Cream.png" /&gt;
                  &lt;img alt="" name="Cockies-&amp;-Cream" quantity="1" price="50.96" src="images/flavor/Cockies-&amp;-Cream.png" /&gt;
                         &lt;img alt="" name="Cocolate" quantity="1" price="20.99" src="images/flavor/Chocolate.png" /&gt;
                  &lt;img alt="" name="Mint-Chocolate-Chip" quantity="1" price="40.99" src="images/flavor/Mint-Chocolate-Chip.png" /&gt;
                  &lt;img alt="" name="Triple-Tornado" quantity="1" price="20.99" src="images/flavor/Triple-Tornado.png" /&gt;
                  &lt;img alt="" name="Vanilla-Bean" quantity="1" price="50.99" src="images/flavor/Vanilla-Bean.png" /&gt;
                  &lt;img alt="" name="Vanilla" quantity="1" price="30.9" src="images/flavor/Vanilla.png" /&gt;
                  &lt;img alt="" name="Cockies-&amp;-Cream" quantity="1" price="50.96" src="images/flavor/Cockies-&amp;-Cream.png" /&gt;
                  &lt;img alt="" name="Cockies-&amp;-Cream" quantity="1" price="50.96" src="images/flavor/Cockies-&amp;-Cream.png" /&gt;
                  &lt;img alt="" name="Cockies-&amp;-Cream" quantity="1" price="50.96" src="images/flavor/Cockies-&amp;-Cream.png" /&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>and my Jquery for draggable image:</p>
  
  <pre><code> $("#dvSource img").draggable({
                  revert: "invalid",
                  snap: "#dvSource",
                  stack: ".draggable",
                  refreshPositions: true,
                  drag: function (event, ui) {
                  ui.helper.addClass("draggable");
                  },
  )};
  </code></pre>
  
  <p>I search and found out this might help </p>
  
  <pre><code> stack: ".draggable",
  </code></pre>
  
  <p>but still the same result my image is still at the back of the container </p>
  
  <p>To make this clear see my problem image below:</p>
  
  <p><img src="https://i.stack.imgur.com/YPlgG.png" alt="enter image description here"></p>
  
  <p>and Here is my wanted Result when I drag the image:</p>
  
  <p><img src="https://i.stack.imgur.com/2hEom.png" alt="enter image description here"></p>
  
  <p>Here is my CSS for container</p>
  
  <pre><code>   #dvSource
          {
              border: 5px solid #ccc;
              padding: 5px;
              min-height: 50px;
              width: 885px;
              height:120px;
              overflow-x: auto;
              overflow-y: auto;
  
          }
  </code></pre>
  
  <p>and CSS for image</p>
  
  <pre><code> img
          {
              height: 120px;
              width: 120px;
              margin: 1px;
              border:solid gray 2px;
  
          }
  </code></pre>
  
  <p>Thanks in advance!..</p>