jquery effect from jquery ui dialog goes behind div

Question

I have a simple div with a few html elements within. There is a link in the div, which when clicked, pops up a jquery dialog.
The dialog displays well and I've attached some effects to the dialog for open and close. The open effect works well; however, when i close the dialog, the explode effect goes behind the div from where the dialog was opened.
The dialog closes as expected and I see the exploding effect behind the div when I'm expecting it to explode in front of the div. I tried setting the z-index to a high number on the dialog div, but no change in the behavior.

Browser is IE8