首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >导航内侧表头,位置固定?

导航内侧表头,位置固定?
EN

Stack Overflow用户
提问于 2013-11-11 23:32:33
回答 2查看 1.3K关注 0票数 0

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

现在我想给出的位置为固定的头部和导航。我已经尝试了以下代码,但不能得到我想要的请帮助我,

我的header.css

代码语言:javascript
复制
width:100%;
height:60px;
background: #ffffff;
position:fixed;
z-index:999;`

还有我的nav.css

代码语言:javascript
复制
background: #ffffff;
height: 60px;
text-align:center;
position:fixed;
z-index:99; 

.nav ul

代码语言:javascript
复制
margin:0;
padding:0;

.nav li

代码语言:javascript
复制
   display: inline-block;
   list-style-type: none;
   vertical-align:middle;`

.nav li a

代码语言:javascript
复制
font-size: 16px;
color: black;
display: block;
line-height: 60px;
padding: 0 10px;
text-decoration: none;
EN

回答 2

Stack Overflow用户

发布于 2013-11-11 23:45:22

如果nav在报头中,那么在nav.css中不需要索引,还应该删除z索引。更清楚地描述问题和您正在使用的html将会有所帮助,如果这没有帮助的话。

票数 0
EN

Stack Overflow用户

发布于 2013-11-12 00:07:36

@Fastnto,这是你想要的东西吗?

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

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

希望这能有所帮助。

代码语言:javascript
复制
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;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/19910029

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档