将导航栏固定

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

我直接给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;
}

希望可以帮到你~

收起回答