将导航栏固定

如果我想讲导航栏固定在页面上方应该怎么弄呢？

我直接给header区加上position：fixed会导致我的居中定位有问题导航栏贴在左上角

html代码

<header>
    <div class="container">
        <a href="next.html"><img src="logo.jpg"></a>
        <nav>
            <a href="#">HOME</a>
            <a href="#">PORTFOLIO</a>
            <a href="#">TEAM</a>
            <a href="#">CONTACT OS</a>
        </nav>
    </div>
</header>

css代码

/*通用模块*/
* {font-family: Microsoft YaHei UI;font-size: 14px;margin: 0;padding: 0;border: none;}
a {text-decoration: none;}
/*导航栏区域*/
header {height: 80px;background: #2e2e2e;position:fixed;}
header {box-shadow: 0px 3px 3px 0px #808080;}
header > .container {width: 1200px;margin: 0 auto;}
header > .container > a {display: block;float: left;margin: 20px 25px;}
header > .container > nav {float: right;}
header > .container > nav > a {line-height: 80px;color: #fff;height: 80px;width: 125px;float: left;text-align: center;}
header > .container > nav > a:hover {background: #78b917;}

qq_羽根轻拽_03768502 2017-09-29

源自：HTML5展望 3-2 作业题

收起

2回答

樱桃小胖子回答被采纳获得+3积分 2017-09-29 14:09:42

header {
                height: 80px;
                background: #2e2e2e;
                position: fixed;
                /*position: fixed;会脱离文档流，因此需要设置位移量*/
                top:0;
                left:50%;
                /*设置50%以后，这50%+container自身的宽度>居中的宽度，因此还需要减去container自身宽度的一半*/
                margin-left:-600px;
            }
             
            header {
                box-shadow: 0px 3px 3px 0px #808080;
            }
            

原理写在注释里面了，建议参注释和代码进行理解，祝学习愉快！

收起回答

qq_羽根轻拽_03768502 提问者 #1

非常感谢！

2017-09-29 14:34:25
qq_羽根轻拽_03768502 提问者 #2

为什么我不写left定位，直接用margin-left设置为什么怎么设置都不出效果呢？

2017-09-29 14:38:39
樱桃小胖子回复提问者 qq_羽根轻拽_03768502 #3

position: fixed;脱离文档流之后便不再受其他css样式的控制，除非是设置了位移量以后，重新定位到文档流中，才能够继续使用其他css属性。希望可以帮到你！

2017-09-29 14:41:21

点开查看后面1条评论

樱桃小胖子 2017-09-29 15:14:06

如果你想让header的宽度100%显示贯穿整个页面。直接设置：

header {
    height: 80px;
    background: #2e2e2e;
    position: fixed;
    /*设置宽度即可*/
    width:100%;
    top:0;
}

即可。我们说的这一种方法只是针对没有100%显示想要居中的header的效果设置的

header {
    height: 80px;
    background: #2e2e2e;
    position: fixed;
    /*position: fixed;会脱离文档流，因此需要设置位移量*/
    top: 0;
    left: 50%;
    /*设置50%以后，这50%+container自身的宽度>居中的宽度，因此还需要减去container自身宽度的一半*/
    margin-left: -600px;
}