css - IE 10 Html 5 视频叠加文本(z-index)

Question

在 Internet Explorer 10 中查看此页面:

http://stage.tremorvideo.com/new/seller

在顶部，有一个 html 5 视频自动循环播放(静音)。那里也应该有一些文字，覆盖视频。尽管包含具有更高 z-index 的文本的 div，它仍然没有显示。

有问题的部分嵌套在 html > body > main > class landing-page-billboard 部分(main 的第二个 child )。

您可以看到它在 Chrome、Safari 或更新版本的 IE 上应该是什么样子。

这是怎么回事？有谁知道我该如何解决这个问题？

Answer 1

要使 z-index 正常工作，元素必须具有非静态定位，例如 relative 或 absolute。

要解决您的问题，请添加以下内容:

.landing-page-billboard .tout-wrapper {
   ⋮
   position: relative;
   z-index: 1;
}

无需为 z-index 数字而疯狂。 1 就足够了:)