Question

所以这就是我得到的：

现在当你按下“Make A Appointment”右边的胖胖蓝色按钮时，会出现一个灯箱。虽然这个灯箱在幻灯片放映下与菜单相同，但z-index比灯箱大。虽然我已经为灯箱设置了z-index为999999，但它仍然出现在它们下面。

我该怎么办？

Answer 1

我即将面临类似的问题，但我一直无视它。

我的计划虽然可能不完美，但是运行一个脚本会在页面上找到最高的z索引并将它们减1，这样我的对象实际上就可以在顶层了。

由于你正在使用jQuery，你可以使用像TopZIndex这样的插件，或者你可以只检查那个插件并借用使$.topZIndex()工作的代码。

一旦你拥有z索引最高的对象，就可以修改他们的CSS以降低值。

使用该插件，代码如下所示：

var bastardObjects = $.topZIndex();
bastardObjects.css("z-index",999998);

编辑：如果我误解了，我很抱歉，我以为你说你有多个具有最大z-index的对象，所以他们没有很好地一起玩。

Answer 2

问题的根源是你的modal-bg和modal-box的位置。

它们都位于具有“page-content-shadow”类的元素中 - 此类具有相对位置和z-index为5.这意味着即使您将模态设置为z-index为99999，仅与其父元素的z-index（在本例中为5）的上下文有关。

要解决这个问题，您只需将page-content-shadow类的z-index更改为100.这将把它放在导航和幻灯片放映之上（至少在Chrome中）。