NavBar 上方的 HTML/CSS 空间并且不会保持固定

Question

我似乎无法让我的导航栏变粘，也无法让我的导航栏上方没有空间。
我网站的 URL 是:http://cudahost.com/new
CSS 就像:

body {
    font-size: 12px;
    line-height: 22px;
    font-family: Arial, Helvetica, Sans-Serif;
    color: #555;
    background-image:url('images/bg.png');
}

#navtopstick {
    background: inherit;
    height: auto;
    margin-top: -10px;
    position: fixed;
    z-index: 10;
}

/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}

/* HTML ELEMENTS */
h1 { font-family:"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif; text-align: center; color: #000; font-size:60px; letter-spacing:-1px; }
h1 small{ font-size: 24px; display: block; color: #636363; }

/* COMMON CLASSES */
.break { clear:both; }

/* WRAPPER */
#wrapper { width:980px; margin:40px auto; }

/* CONTENT */
#content { margin-top:50px; }
#content p { font: 14px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif; color:#333333; line-height:18px; margin:15px auto; width:800px; }
#content p a { color:#0088CC; text-decoration:none; }
#content p a:hover { text-decoration:underline; }

/* STYLE NAVIGATION MENU */
#appleNav { margin:40px 0; list-style:none;

    /* Lucinda Grande is the font used */
    font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; letter-spacing:-0.5px; font-size:13px;

    /* Apply a subtle text-shadow to the text */
    text-shadow: 0 -1px 3px #202020;

    width:980px; height:34px;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;

    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;
    position: fixed;
}

#FooterWrapper {
    width: 100%;    
    max-width: 980px;
    margin: auto;
    bottom:0;
    background: url(images/darker.png);
} 


#footer {
    background: url(images/darker.png);
    width: 100%;
    float:left;
    bottom:0;
} 

    .footerFloat h3{ font-size: 20px; color: #0431B4; margin-bottom: 10px; text-transform: none; font-weight: bold; }
    .footerFloat a{ color: #04B431; margin-bottom: 10px; text-transform: none; font-weight: bold; }
    .footerFloat a:link { color: #04B431; text-decoration: none}
    .footerFloat a:visited { color: #04B431; text-decoration: none}
    .footerFloat a:hover { color: #04B431; text-decoration: underline}
    .footerFloatLast h3{ font-size: 20px; color: #0431B4; margin-bottom: 10px; text-transform: none; font-weight: bold; }

.footerFloatLogo {
    width: 40%;
    float: left;
    min-width:200px;
    bottom:0;
}

.footerFloat {
    width: 25%;
    float: left;
    min-width:200px;
    bottom:0;
}

.footerFloatLast {
    width: 30%;
    float: left;
    min-width:200px;
    bottom:0;
}

#wrapper {
    width: 100%;
    overflow:hidden;
} 

#appleNav li { display:block; float:left; border-right:1px solid #5d5d5d; border-left:1px solid #929292; width:105px; height:34px; border-bottom:1px solid #575757; border-top:1px solid #797979;

    /* Gradient backgrounds for the buttons. Generated using http://gradients.glrzad.com/ */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f; /* Fallback */
}

/* Set the states when hovering */
#appleNav li:not(:last-child):hover {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
    background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
    background-color:#383838; /* Fallback */

    /* We use the inset of the box shadow to create a subtle inner glow when hovering */
    -moz-box-shadow: inset 0 0 5px 5px #535353;
    -webkit-box-shadow: inset 0 0 5px 5px #535353;
    box-shadow: inset 0 0 5px 5px #535353;
}

/* When the user clicks the button, */
#appleNav li:not(:last-child):active {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
    background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
    background-color:#383838; /* Fallback */

    -moz-box-shadow: inset 0 1px 2px 2px #000;
    -webkit-box-shadow: inset 0 1px 2px 2px #000;
    box-shadow: inset 0 1px 2px 2px #000;
}

#appleNav li a { color:white; text-decoration:none; text-align:center; display:block; line-height:34px; outline:none; }

/* Styling of the search field */
#appleNav form input { width:76px; height:20px; margin-left:9px; margin-top:8px; border:none; padding-left:20px; padding-right:10px; color:#eee;

    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;

    /* CSS3 multiple backgrounds for the input field: The magnifier image and the gradient background */    
    background-image: url("../images/magnifier.png"), -webkit-gradient(linear, left bottom, left top, color-stop(0, #747474), color-stop(0.5, #6E6E6E), color-stop(0.51, #7E7E7E), color-stop(1, #8D8D8D));
    background-image: url("../images/magnifier.png"), -moz-linear-gradient(center bottom, #747474 0%, #6E6E6E 50%, #7E7E7E 51%, #8D8D8D 100%);
    background-repeat: no-repeat;

    background-color:#6E6E6E; /* Fallback */

    -moz-box-shadow: inset 0 2px 1px 1px #363636;
    -webkit-box-shadow: inset 0 2px 1px 1px #363636;
    box-shadow: inset 0 2px 1px 1px #363636;
}

/* Rounded corner for the first in last item. Shorthand: Top left, Top right, Bottom right, Bottom left. */
#appleNav li:first-child {
    -moz-border-radius:4px 0 0 4px;
    -webkit-border-radius:4px 0 0 4px;
    border-radius:4px 0 0 4px;

    border-left:none;
}

#appleNav li:first-child a img {
   vertical-align:middle; margin-top:-2px;
}

#appleNav li:last-child {
    -moz-border-radius:0 4px 4px 0;
    -webkit-border-radius:0 4px 4px 0;
    border-radius:0 4px 4px 0;

    border-right:none;
    width:124px;
}

/* Fade in animation (Webkit only) */
@-webkit-keyframes showMenu {
    from { opacity: 0; top:-20px; }
    to   { opacity: 1; }
}

#appleNav {
     -webkit-animation: showMenu 1s; position:relative;
}

有人可以帮我解决这个问题吗？如果可能的话，我希望我的导航栏始终粘在顶部，但它似乎不起作用。

另外，如果可能的话，你能解释一下我是如何修复我的代码，使我的页脚位于页面底部，而不是粘性或固定的，所以它会被“推”到底部，即使没有足够的内容，阻止它位于页面的中间位置。

非常感谢，希望能尽快得到一些帮助。

--------更新-------- 感谢人们的回答，我已经解决了大部分问题，现在我只想在页脚上方添加一点空间，使其不在文本上方，是否可以使用上方填充或边距来做到这一点？不确定如何执行此操作，我们将不胜感激。

Answer 1

移除 wrapper 上的边距。删除 #applenav 上的 position: relative; 和 margin 语句，并在 navtopstick 上设置 position: fixed 而不是#applenav。然后，删除边距@ #content 就可以了!在这种情况下，您的导航将固定在上方，您可以进一步设计它。

如果你坚持你现在使用的风格，你将无法让它发挥作用。