欢迎关注路条编程的公众号，通过学习应用视觉设计这一系列文章，你将会逐步掌握页面版式、色彩、图形、动画和布局相关的基础知识。
今天我们要介绍的内容是使用 position 属性的 fixed 值实现标题栏及导航栏固定在顶部。我们平时在浏览网页时经常会看到有些网站的导航条为了美观、方便，将导航条固定在顶部，不会随着滚动条的滚动而消失,而是一直固定在顶部。也可以理解为元素本身就是随着滚动条的滚动而滚动的,所以不会消失。这个效果实现的关键就是 position: fixed。position: fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 top、right、bottom、left 属性进行设定。position: fixed 元素的包含块是初始化包含块。当页面出现滚动条时，无论如何滚动，position: fixed 的元素始终处于固定的位置，不会随着页面滚动。因此，position: fixed 的定位被称作固定定位。不过，IE6 及以下版本不支持固定定位。我们在文章 “应用视觉设计：「13」使用绝对定位将元素固定在父元素指定位置” 代码的基础上，调整样式如下所示：<style type="text/css">
.layout {
padding-top: 5px;
}
.header {
position: fixed;
left: 0;
right: 0;
margin: 10px auto 10px;
}
.nav {
position: fixed;
top: 80px;
left: 0;
right: 0;
}
</style>
以上代码重新设置了 .layout 类，将顶部内边距调整为 5px, 将 .header 和 .nav 类设置为 position: fixed ， 为了实现标题栏及导航栏居中显示，需要增加 left: 0; right: 0; 设置。如果想实现水平及垂直方式都居中显示，需要增加 left:0; right:0; top:0; bottom:0; 4 个属性的设置。保存页面，大家可以通过示例页面或下面的完整效果图比较下应用样式的效果，调整页面效果如下：重要提示：示例效果预览，请访问 https://www.icoderoad.com , 完整代码查看及下载，请访问 https://github.com/icoderoad/demo。
今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码加入学习社群，我们会尽力为你解答。
作者：路条编程（转载请获本公众号授权，并注明作者与出处）
