I have a problem with IE7 where the jQuery UI draggable is displayed under droppable and not on top of it when dragging and dropping. Dropped can also be dragged. This page works great in IE8 and other browsers. I tried quirks and standards in IE7. Both problems arise.
A castable consists of two divs on top of each other, one shifted from the other using the jQuery position utility function. Drag and drop should appear on top of both. The draggable Z-index is set to a very high value to provide it on top of everything on the page. As a drag test, I set and display the z-index of the div in droppable and draggable and confirm that draggable has the highest z-index.
After some troubleshooting, it seems that "position:relative" is the culprit. When I delete the position function, the draggable shows on top. However, I need it to position several elements correctly, especially two divs that are on top of each other.
Is there a workaround for this problem?
(My html is pretty hard to show here.)
**Addition:**
I tried positioning with position: absolute, instead of using position (). Still no.
source share