html5 背景视频与 chrome 上的粘性标题答案

【问题标题】：html5 background video with sticky header on chromehtml5 背景视频与 chrome 上的粘性标题
【发布时间】：2013-08-12 19:16:33
【问题描述】：

我正在使用在后台播放视频的 JQUERY 插件 (Bigvideo) 创建网页。我遇到的问题是 div 弄乱了我的粘性标题。添加视频背景后，标题根本不粘。

有趣的是它在 Firefox 上运行良好。在 chrome 中，您可以看到还有一些难以描述的问题（当内容工具提示出现和滚动时，图像和背景会混乱）

我尝试了 2 个不同的插件 - Bigvideo 和 Jquery 视频背景插件。

有趣的是，当我将背景视频的 z-index 从 -1 更改为 0 时，它可以正常工作，但即使我将它们的 z-index 更改为正数，它也会使我的所有内容消失。

我正在附加一个链接到正在建设的页面。

感谢您对此事的任何帮助。

谢谢

【问题讨论】：

在 Chrome Canary 中它显示正常，所以您等待几周，它会解决您的问题
但这意味着我们的网站只能在最新的chrome版本上正常显示。我想让我们的网站在最后 2-3 个最新版本的 chrome 中可见。有没有办法找到导致此问题的具体问题？
背景层中的视频...您可以尝试在其中放置动画 gif 或什么都没有。在类似的情况下，我可以解决将前层显示的问题：固定 div，但我不知道它是否适合您。

【解决方案1】：

可能您的 z-index 与您提到的 jQuery 插件的 CSS 文件混淆了。

【讨论】：

【解决方案2】：

我设法修复它。我必须在代码中的每个 div 中添加 position:relative 和 z-index 值。之后，我将背景视频的 z-index 更改为 0 而不是 -1。成功了……

【讨论】：