固定位置导航栏的宽度和重叠问题

Question

您好，社区成员，

我目前遇到的一个问题是，我已经固定了顶部导航栏，以便在用户向下滚动我的网页时可以跟踪它，但是我目前面临两个问题。

1. 我网站的内容与我的导航栏重叠，并且位于它的顶部，使它看起来很凌乱，无法正常工作。 （背景不是透明的，而是实心的图像）

2. 该网站很不稳定，为了使它正常工作，我已经摆弄了几个小时，但是当我设置最小宽度和最大宽度时，它似乎并没有遵循最小宽度和宽度的百分比（100容器的百分比）。 抱歉，如果我不清楚这方面的解释，但是我在jsfiddle中附加了一些代码供人们查看。

如果您现在想知道我的位置，可以在subnovaled.com（顶部的蓝色条）中查看，jsfiddle链接如下：

    #navMainWrapper {
height: 32px;
font-size: 12px;
position: fixed;
min-width: 1000px;
max-width: 1280px;
width: 100%;
    background: cyan;
    }

http://jsfiddle.net/jXJMx/23/注意：上面的代码是匆忙完成的，抱歉

谢谢任何能够帮助我的人！

Answer 1

检查这个小提琴：

http://jsfiddle.net/jXJMx/26/

CSS：

 #navMainWrapper {
    height: 32px;
    font-size: 12px;
    position: fixed;
    min-width: 750px;
    max-width: 1280px;
    width: 100%;
    background: cyan;
}
#navMainSearch {
    float:left;
    width:120px;
}

#navMain {
    float:left;
    width:750px;
    line-height:normal;
    height:32px;
}
#navMain ul {
    float:right;
    list-style:none;
}
#navMain li {
    display:inline;
}
#navMain a {
    float:left;
    text-decoration:none;
}
#navMain a span {
    float:left;
    display:block;
    padding: 7px 15px 0 15px;
    text-align:center;
    width:90px;
    cursor:pointer;
    height:25px;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#navMain a span {
    float:none;
}
/* End IE5-Mac hack */

#navMain a:hover {
    background-position:0% -32px;
}
#navMain a:hover span {
    background-position:100% -32px;
}
#content {
    background:yellow; 
    min-width:750px;
    width:100%;
    height:768px;
    position:relative;
    margin-top:32px;
}

Answer 2

如图所示更新CSS

#navMainWrapper {
height: 32px;
font-size: 12px;
position: fixed;
min-width: 1000px;
max-width: 1280px;
width: 100%;
    background: cyan;
}
#navMainSearch {
float:left;
width:120px;
}

#navMain {
float:left;
line-height:normal;
height:32px;
}
#navMain ul {

list-style:none;
}
#navMain li {
display:inline;
}
#navMain a {
float:left;
text-decoration:none;
}
#navMain a span {
float:left;
display:block;
padding: 7px 15px 0 15px;
text-align:center;
/*width:90px;*/
cursor:pointer;
height:25px;
}
 /* Commented Backslash Hack hides rule from IE5-Mac \*/
#navMain a span {
float:none;
}
/* End IE5-Mac hack */

#navMain a:hover {
/*  background-position:0% -32px;*/
}
#navMain a:hover span {
/*  background-position:100% -32px;*/
}
#content {
background:yellow; 
width:100%;
float:left;
height:1500px;
}