Html 如何创建固定顶栏?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16406015/
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 08:09:48  来源:igfitidea点击:

How can I create a fixed top bar?

htmlcss

提问by Dane

I would like to create a black strip on the top of the page (used as the navigation system) and I want the position to be fixed, so when I scroll down on the page it will remain on the screen.

我想在页面顶部创建一个黑色条带(用作导航系统)并且我希望位置固定,所以当我在页面上向下滚动时,它会保留在屏幕上。

I'm unsure how it would be possible to allow it to be visible on the screen at all times & would I need to create a CSS to create the navigation strip, or insert a black box then CSS it to the top?

我不确定如何让它始终在屏幕上可见&我是否需要创建一个 CSS 来创建导航条,或者插入一个黑框然后将其 CSS 到顶部?

回答by npage

CSS

CSS

#blackBar{
   position:fixed;
   top:0;
   left:0;
   width:100%;
   height:60px;
   background-color:black;
}

http://jsfiddle.net/LzDR7/

http://jsfiddle.net/LzDR7/

回答by sbru

In the div that is this black strip, set its "position" property to "fixed" in the css like this:

在这个黑色条带的 div 中,在 css 中将其“位置”属性设置为“固定”,如下所示:

position: fixed;