JQuery UI 具有常规 Div 的对话框堆叠顺序

Question

我的页面顶部有一个带有下拉链接的菜单栏。我还有一个包含一些内容的可拖动 JQuery 对话框 window。问题是我不希望对话框 window 阻碍菜单栏和链接。如何确保菜单栏 div 始终绘制在对话框前面？在过去我会通过设置适当的 z-index 来完成它，这似乎不适用于最新的 jquery ui.

example image showing my setup

Answer 1

经过几个小时的搜索，我意识到问题出在如何将对话框添加到页面上。我能够使用以下代码将对话框附加到所需的 div 容器：

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

完成后，我的 CSS 中的 z-index 工作正常。

还应注意，使用 Microsoft Edge DevTools 中内置的 Z-index 3D 视图非常有帮助。例如：3d View

JQuery UI 具有常规 Div 的对话框堆叠顺序

JQuery UI Dialog Stacking Order With a Regular Div

jquery

jquery-ui

dialog