jquery - z-index 问题，Mask 结束视频？

Question

If you take a look at this page ，然后单击 slider 中的“播放”图标 - 然后在 IE 中， mask 位于整个视频/页面的顶部，但 mask 的 z-index 低于打开的 div？在 FF 和 Chrome 中，只有“关闭”按钮位于 mask 下方...无法完全弄清楚为什么，因为 mask 的 z-index 低于带有视频的 div？

Answer 1

您的页面的行为完全符合预期。

掩码是 body 标签的直接子标签，它的 z-index 为 1000。

您的视频是 z-index 为 1 的任何 slider 中 li 的直接子级。

因此，即使您的视频本身的 z-index 为 5000，它也处于低于您的 mask (因为 1 低于 1000)的堆叠上下文中，因此会出现在您的 mask 后面。

如果可能的话，最好的办法是让包含视频的对话框出现在与 mask ( body 的直接子项)相同的堆叠上下文中。