通过定位position="fixed"实现网页内容的固定层效果

在网页的顶部或者底部导航栏中经常需要使用到固定层的效果，即紧挨浏览器窗口的顶部或底部而网页其他内容的影响。

一、实现

主要通过设置导航栏元素的位置属性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 .