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

Posted 2023-05-08

【中文标题】带有常规 Div 的 JQuery UI 对话框堆叠顺序

【英文标题】：JQuery UI Dialog Stacking Order With a Regular Div

【发布时间】：2021-08-06 08:02:32

【问题描述】：

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

example image showing my setup

【参考方案1】：

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

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

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

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