HTML 位置固定错误

Question

为我的大学元素制作一个网站，在 Chrome 中查看我的网站时遇到了一个小问题(这通常对兼容性非常好，所以我可能在装傻)。我将标题栏和“controls_container”都设置为 position:fixed 以便在向下滚动页面时可以看到它们，但在 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); 添加到固定元素的样式中，问题就消失了。这些属性将您的固定元素放在单独的渲染层(堆栈上下文)中，浏览器会正确渲染它们。