用 position:fixed 固定位置

頁首的區塊不會隨著一起捲動，能夠在固定的位置一直顯示在畫面上。這時主角登場啦！讓我們幫他加上 position:fixed：

#fiexd-header{
  background:#66CCCC;
  color:#FFFFFF; 
  border-top:2px solid #336699;
  border-bottom:2px solid #336699;
  width:100%;
  position:fixed; /*固定位置定位*/
  top:0; /*距離上方 0 像素*/
  z-index:1; /*重疊時會在其他元素之上*/
}

加上 position:fixed 便能讓這個元素固定位置，不會隨著頁面一起捲動，這是標準的 CSS 裡面就有的功能。而我們希望它一直固定在瀏覽器視窗最上方的位置，所以要加上 top:0。再加上 z-index:1 讓它的內容重疊在其他網頁內容之上，不會被蓋掉。