Question

Hello社区成员，

我目前遇到的问题是我将顶部导航栏设置为固定，以便在用户向下滚动我的网页时跟随用户，但我目前面临两个问题。

我的网站内容与我的导航栏重叠，并在其上面显示它看起来很乱并且不按设计运行。（背景不透明，而是实心图像）
这个网站很流畅，我已经花了好几个小时试图让它工作但是因为我设置了一个最小宽度和最大宽度它似乎不服从最小宽度和宽度百分比（容器的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更新为show

#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;
}

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

2 个答案: