I have a menu bar at the top of my page with dropdown links. I also have a draggable JQuery Dialog window with some contents. Problem is I do not want the dialog window to obstuct the menubar and links. How do I ensure that the menu bar divs are always drawn in front of the dialog? In the past I would have done it with setting appropriate z-index, this doesn't seem to work with newest jquery ui.

example image showing my setup

CodePudding user response：

After hours of searching I realized that the issue was with how the dialog was added to the page. I was able to append the dialog to desired div container using the following code:

$("#dialog").dialog({
  appendTo: "#main_container"
});

Once this was done, z-index in my CSS worked just fine.

Also should note that using the Z-index 3D View build into Microsoft Edge DevTools was very helpful. ex: 3d View