CSS:三个不同插件与z-index冲突，z-index不生效

Question

这就是我得到的:

http://mysite.com

现在，当您按下“预约”右侧的大胖蓝色按钮时，会出现一个灯箱。虽然这个灯箱位于幻灯片下方，与菜单相同，但 z-index 比灯箱大。虽然我已经将灯箱的 z-index 设置为 999999，但它仍然出现在它们下面。

我应该在这里做什么？

Answer 1

问题的根源在于模态背景和模态框的放置。

它们都位于类为“page-content-shadow”的元素内——该类的位置和 z-index 均为 5。这意味着即使您将模态设置为z-index 为 99999，这仅与其父元素的 z-index 上下文相关(在本例中为 5)。

要解决此问题，您只需将 page-content-shadow 类的 z-index 更改为 100。这会将其置于导航和幻灯片的顶部(至少在 Chrome 中)。