页面的CSS菜单顶部

Question

I am going to start working on a small website for my class, I am trying to do a menu that will be positioned at the top of the page.

This is what I have:

<style>
#menu
{
    background:#CCC;
    width:100%;
    height:40px;
    position:absolute;
    margin:0;
    z-index: 100;
}
</style>
<div id="menu">

</div>

But for some reason this div is not at the top there's a small space between the top and the div(menu); also, on the left side there is a small space, how can I fix this?

Answer 1

Add something like this to the top of your CSS file or <style> tag:

* {
  margin: 0;
  padding: 0;
}

You can then set paddings and margins later on.

Answer 2

This should fix it...

body {
  margin:0;
}

---

If you want the navigation menu to stay at the top when you scroll then use this...

#menu {
  position:fixed;
  top:0;
}

Answer 3

Add this code to eliminate the top margin

body{
   margin: 0;
   padding: 0;
}

Answer 4

css

body,div{
       margin:0px;
       padding:0px;
}

Answer 5

Take a look at this jsFiddle

You need to add

position: fixed;
top: 0;

to #menu

Answer 6

If you need your menu to be positioned on the top of the page, this is what you need

#menu
{
    position: absolute;
    top : 0px;
}

you made on your code the position absolute, but you missed the top attribute