在網頁的頂部或者底部導航欄中經常需要使用到固定層的效果，即緊挨瀏覽器窗口的頂部或底部而網頁其他內容的影響。
一、實現
主要通過設置導航欄元素的位置屬性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 .