CSS z-index 和移动设备

Question

我有一个 jquery 模态对话框，我想在该模态对话框和屏幕之间放置一个完整的阴影，所以我创建了一个覆盖

<div>

:

<div id="overlay" class="overlay btn-hidden"></div>
<div id="myDialogBox" name="myDialogBox" class="myDialogBox"></div>

在 CSS 中我定为：

.myDialogBox {
    z-index: 999 !important;
}

.overlay {
    z-index: 800 !important;
    position: fixed !important;
}

所以在桌面屏幕上，我认为叠加层已正确应用在对话框的正后方....但是在 Chrome 上，我调试从桌面屏幕切换到移动屏幕时，我看到叠加层位于顶部，因此我无法在对话框上执行操作....当我在移动设备上使用

position: relative

时，我也尝试将

@media screen and (max-width: 769px)

作为覆盖层但在移动设备上什至没有出现覆盖层......所以有没有办法强制覆盖层留在后面模式对话框也在移动屏幕上？....