title: Draggable elements in div show up behind drop zone when div is scrollable, need them to show in front
body: <p>EDIT: I was able to figure something out, this fiddle reflects the change: <a href="http://jsfiddle.net/Kw27r/5/" rel="nofollow">http://jsfiddle.net/Kw27r/5/</a></p>
  
  <p>I have a div (<code>#gallery</code>) which contains a set of draggable tiles. They are to be dropped into another div (<code>#imageDropContainer</code>) which contains several drop zones. Here is the issue I am having:</p>
  
  <p>When <code>#gallery</code>'s <code>overflow-y</code> property is set to visible, everything works fine. However, <code>#gallery</code> must have a fixed height, meaning it can only display 2 rows of tiles at once. So if the overflow is set to visible, you can't see anything in the 3rd row because it is "hiding" behind the <code>#imageDropContainer</code> which is immediately below <code>#gallery</code>. If you set the div to scrollable, then you can scroll to the other elements in the div but the tiles are "hidden" behind the drop zone while you are dragging them.</p>
  
  <p><strong>How can I allow the div to remain scrollable, but have draggable tiles not hide behind the drop zone while they are being dragged?</strong> in other words, <strong>How can I circumvent the standard behavior of the <em>'Overflow'</em> property?</strong></p>
  
  <p>Here is a fiddle to demonstrate:</p>
  
  <p><a href="http://jsfiddle.net/Kw27r/4/" rel="nofollow">http://jsfiddle.net/Kw27r/4/</a></p>
  
  <p>What I have considered "pertinant" JS and CSS is shown in the fiddle. If I have overlooked something, other background CSS and JS can be viewed from the <code>external resources</code> tab.</p>
  
  <p>Thanks for reading!</p>