在网页的顶部或者底部导航栏中经常需要使用到固定层的效果，即紧挨浏览器窗口的顶部或底部而网页其他内容的影响。
一、实现
主要通过设置导航栏元素的位置属性position="fixed"来实现导航栏的固定效果。
学习过bootstrap框架都知道，在为网页设置顶部或底部导航栏时，需要为div或者ul列表设置
class="navbar navbar-fixed-top"或class="navbar navbar-fixed-bottom"的类名，
在这里可以发现都用到了fixed的属性，查看相关的css代码可以发现：
二、定位
定位position有五个属性：relative、absolute、fixed、static、inherit，其中fixed和absolute都为固定定位，
顶部导航或者底部导航的元素都被定位成fixed绝对定位，那么fixed的绝对定位和absolute的绝对定位有何不同呢？
*position:fixed; position:absolute;的异同：
【相同点】
1.完全脱离标准文档流；
2.未设置偏移量时，都定位于父元素的左上角（元素设置定位后，就具有偏移属性和堆叠属性z-index）；
2.在没有设置定位形式的时候，它会在页面垂直排列的，在左上角显示；
3.在游览器中显示会有一个默认的margin 和padding值（故在添加导航时需设置body的padding和margin为0）。
【不同点】
1.absolute定位的元素会随滚动条变化而改变位置（其定位相对于页面元素）；
2.fixed定位的元素位置固定，不随滚动条变化而改变位置，并且滚动条变化时被其遮盖的元素会从其下方穿过。
三、实现固定层效果要注意的问题
若页面结构如下：
需要设置#top元素为顶部导航，则需要设置对应的样式如下：
【解析】
1.由于body存在默认页面间距，所以首先要设置页面间距为0，否则元素无法撑满整个可视窗口；
2.为顶部元素#top设置fixed定位。
3.由于给top选择器设置fixed固定定位时，(top层已经脱离了标准文档流)，其父包裹层body的margin与mainbody的
上margin值发生了重叠，（此时的body与mainbody属于标准文档流）mainbody的上margin值大于body的margin，
选择了mainbody的上margin值20px（标准文档流中上下margin发生重叠时选择margin值大的那个）所以body下移
20px；top层又以body层定位，从而导致了top层与浏览器可视窗口产生了20px的距离。
为了保持top层与浏览器窗口紧挨着，则需对top层的固定定位设置偏移量top:0；
同时为了保证主体内容和导航之间存在一定的间距，为#mainbody设置margin-top:60px .