0

我有一个 100% 宽度的标题和一个 980 像素的导航内部标题

现在我想为标题和导航提供固定的位置。我已尝试使用以下代码，但无法得到我想要的请帮助我，

我的 header.css 

width:100%;
height:60px;
background: #ffffff;
position:fixed;
z-index:999;`

和我的 nav.css

background: #ffffff;
height: 60px;
text-align:center;
position:fixed;
z-index:99;

.nav ul

margin:0;
padding:0;

.nav li 

   display: inline-block;
   list-style-type: none;
   vertical-align:middle;`

.nav li a 

font-size: 16px;
color: black;
display: block;
line-height: 60px;
padding: 0 10px;
text-decoration: none;
4

2 回答 2

0

如果导航位于 nav.css 中不需要的标题内position:fixed，则还应删除 z-index。如果没有帮助，更清楚地描述问题和您正在使用的 html 会很有帮助。

于 2013-11-11T15:45:21.893 回答
0

@Fastnto，你想要这样的东西吗？

http://jsfiddle.net/alexandrecanijo/NBp8F/

我已经更改了原始 CSS 的某些部分以显示标题 (#ccccccc) 和导航 (#000000)，并添加了具有足够 lorem ipsum 的 .content 以便您能够看到导航。但是，CSS 可能会在某些部分被清理和重构......没有改变来做到这一点......

希望这可以帮助。

html,body, p {
    margin: 0;
    padding: 0;
    border: 0;
    font: 14px arial;
}
.header {
    width: 100%;
    height: 80px;
    background: #cccccc;
    position: fixed;
    z-index:999;
    margin: 0;
    clear: both;
    top: 0;
}

.nav {
    background: #000000;
    height: 60px;
    text-align:center;
    z-index:99;
}

.nav ul {
    margin:0;
    padding:0;
}

.nav li {
    float: left;
    list-style-type: none;
}
.nav li a {
    font-size: 16px;
    color: #fe6700;
    display: block;
    line-height: 60px;
    padding: 0 10px;
    text-decoration: none;
}
.nav li a:hover {
    color: #000000;
    background: #fe6700;
}
.content {
    margin-top: 80px;
}
于 2013-11-11T16:07:35.960 回答