HTML 位置固定错误

标签 html css google-chrome

为我的大学元素制作一个网站,在 Chrome 中查看我的网站时遇到了一个小问题(这通常对兼容性非常好,所以我可能在装傻)。我将标题栏和“controls_container”都设置为 position:fixed 以便在向下滚动页面时可以看到它们,但在 Chrome 中它们不是固定的,而在 IE、Safari 和 Firefox 中它按预期工作。

这是在 Chrome 中查看的页面顶部: webpage in chrome 这是在 Chrome 中向下滚动之后: scrolled in chrome (标题栏向上滚动,左侧的面包屑按钮也是如此)

这是在 IE 中滚动之后: scroll in IE

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

最佳答案

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

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

关于HTML 位置固定错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27612691/

相关文章:

css - Webkit 不应用 css margin-bottom

jquery - 在 Chrome 中获取自定义 HTML 标签的高度和宽度

css - (Chrome)李悬停不工作

java - Android 从 HTML/PHP 获取字符串

html - W3C 应该使用哪些新的 API 来支持强大的移动 Web 应用程序?

html - 一个人如何像这样布置 z-index ?

javascript - 处理绝对位置元素上的过渡插入其他元素

html - 无法在 chrome(mac)中打开某些 html 文件

html - 悬停时显示表格行边框

javascript - PHP session 在第二次重定向后失去值(value)