HTML位置已修复错误

Question

为我的大学项目创建一个网站，并在Chrome浏览器中查看我的网站遇到了一个小问题（这通常很适合兼容性，所以我可能会玩傻瓜）。我将标题栏和'controls_container'设置为两个位置：固定以便在向下滚动页面时让它们在视图中，但在Chrome中这些不是固定的，而在IE，Safari和Firefox中它按预期工作。

这是在Chrome中查看的页面的顶部： 这是在Chrome中向下滚动后： （标题栏向上滚动，左侧的面包屑按钮也是如此）

这是在IE中滚动之后：

无法从视频中删除z-index，因为它是我的背景视频。 这是我的网站的链接，任何帮助将不胜感激！ http://conet.co.uk/p_c_h/explore.html

Answer 1

您提到的元素 - 标题栏和.controls_container - 实际上是固定的。这里的问题在于渲染，当你使用背景视频时，渲染很奇怪。

尝试将backface-visibility: hidden;或transform: translateZ(0);添加到固定元素的样式中，问题就会消失。这些属性将固定元素放在单独的渲染层 - 堆叠上下文 - 浏览器正确渲染它们。

Answer 2

在Chrome中看起来像渲染问题。如果删除“banner_video”节点，则一切都按预期工作。

请参阅https://code.google.com/p/chromium/issues/detail?id=402211