HTML位置修正错误答案

【问题标题】：HTML Position Fixed errorHTML位置修正错误
【发布时间】：2014-12-23 00:55:52
【问题描述】：

为我的大学项目创建一个网站，在 Chrome 中查看我的网站时遇到了一个小问题（这通常非常适合兼容性，所以我可能在装傻）。我将标题栏和“controls_container”都设置为位置：固定，以便在向下滚动页面时看到它们，但在 Chrome 中这些不是固定的，而在 IE、Safari 和 Firefox 中它按预期工作。

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

这是在 IE 中滚动之后：

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

【问题讨论】：

如果你想修复标题，那么处理window.scroll部分的脚本部分到底是做什么的？
看起来更像是一个奇怪的渲染问题。 DOM 浏览器显示元素在它们应该在的位置。
@Sai 到达页面底部时隐藏导航栏

标签： html css google-chrome

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

看起来像是 Chrome 中的渲染问题。如果您删除“banner_video”节点，一切都会按预期进行。

见https://code.google.com/p/chromium/issues/detail?id=402211

【讨论】：