jQuery UI: droppable background?

Question

I'm trying create a trashcan where after you've put some items there, you could simply open it and drag any trashed item out of it by dropping it outside the trashcan.

The way I've set this, is my web app has a trashcan icon where I drop the items and clicking the trashcan opens a box with the trashed items and fades in a black transparent background that obscures everything else so you just focus on the trashcan box.

The code is essentially

<div id="background"></div>
<div id="trashcanContainer">
   <ul id="items">
     <li>item1</li>
     <li>item2</li>
   </ul>
</div>

The background CSS is set to fixed position and 100% width and height and it is set as a droppable. The problem is that when I drag something from the trashcan and drop it on the background, it gets removed even if I drop it on top of the trashcan. Basically jQuery somehow doesn't understand that the trashcanContainer div is on top of the background div (and thus not part of the droppable) even if I define a z-index higher than the background.

Is there any way I can make this work?

Answer 1

Make sure #trashcanContainer is absolutely positioned with either position: absolute or position: fixed, otherwise z-index will have no effect.