Html 让我的 css 菜单停留在屏幕顶部?

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

Make my css menu stay on top of the screen?

htmlcss

提问by Jacob Anthony Tonna

like in http://facebook.comthey have a nav bar type thing that stays at the top of the page how can i do that with my code. i have my css advanced menu working except for that one problem. well here is my link to my jsfiddle

就像在http://facebook.com 中一样,他们有一个导航栏类型的东西,它位于页面顶部,我如何用我的代码做到这一点。除了那个问题之外,我的 css 高级菜单可以正常工作。好吧,这是我的 jsfiddle 链接

Js fiddle

JS小提琴

Main Parts of css

css的主要部分

#cssmenu ul { margin: 0; padding: 0;}
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu { height: 42px; background-color: rgb(35,35,35); box-shadow: 0px 2px 3px rgba(0,0,0,.4);}

now if im not mistaken this has to be done with this part if not check the JsFiddle

现在,如果我没记错的话,如果不检查 JsFiddle,就必须用这部分来完成

回答by An Phan

Add the following to your menu css:

将以下内容添加到您的菜单 css 中:

#cssmenu {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}

That's basically how they do it.

他们基本上就是这样做的。

回答by ShibinRagh

Add fixed property

添加固定属性

 #cssmenu {
          position:fixed;
 }

回答by Janak

It can be done if you use :

如果您使用,则可以完成:

 position:fixed;

回答by TLCJohn

Just a thought, don't you need to add z-index: 1000;so that it floats over all the items on the page?

只是一个想法,您不需要添加z-index: 1000;以便它漂浮在页面上的所有项目上吗?

回答by user3389058

Yes, you can add z-index: 1000;to make it float above all content. Like RLCJohn said above.

是的,您可以添加z-index: 1000;以使其浮动在所有内容之上。就像 RLCJohn 上面所说的那样。

回答by Selvamani

Use this css for set your nav bar fixed on top.

使用此 css 将导航栏固定在顶部。

 #cssmenu {
   position:fixed;
   top: 0;
   margin:auto;
   left: 0;
   right: 0;
   width: 100%;
  }

Here the demo: http://jsfiddle.net/SkuhZ/

这里的演示:http: //jsfiddle.net/SkuhZ/

回答by SadhanaP

Just these 3 would do..

只要这3个就行了..

position: fixed;
top: 0;
width: auto;