CSS 位置固定不适用于标题

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14732403/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 21:34:01  来源:igfitidea点击:

Position Fixed Not Working for Header

csspositioncss-position

提问by Andrew

I am trying to create a very simple effect where the navigation sticks to the top of the page as you scroll down the page. All I should have to do is set "position: fixed" to the header, which I currently have. For some reason, it's treating it more like a "position: absolute" element vs. fixed. I tried it on other elements on the page with the same effect, so I must have something that in my HTML or CSS code that is causing the issue. Any ideas?

我正在尝试创建一个非常简单的效果,当您向下滚动页面时,导航会固定在页面顶部。我所要做的就是将“位置:固定”设置为我目前拥有的标题。出于某种原因,它更像是“位置:绝对”元素与固定元素。我在页面上的其他元素上尝试过,效果相同,所以我的 HTML 或 CSS 代码中必须有导致问题的内容。有任何想法吗?

http://jsfiddle.net/apautler/yDhXG/1/embedded/result/

http://jsfiddle.net/apautler/yDhXG/1/embedded/result/

Header CSS

标题 CSS

.nav-main  {overflow: visible; position: fixed;
            top: 0; left: 0; right: 0; height: 60px; width: 100%;}

Note, the site is responsive, so the position: fixedkicks in at 768px.

请注意,该站点是响应式的,因此position: fixed在 768 像素处启动。

回答by phihag

At the moment, Chrome cannot render position:fixedon elements under a transformation. Delete the (content-free)

目前,Chrome 无法position:fixed在转换下的元素上呈现。删除(无内容)

-webkit-transform: translate3d(0, 0, 0);

and it will work.

会起作用