文章提要

fixed、relative、absolute、z-index用法

opsition的屬性

fixed 範例
元素位置固定，頁面捲動還是會固定在相同位置

1. 若未設定位置，預設位置會固定於此網頁左上方(body位置)
2. 可設定top、bottom、right、left改變元素位置
   

relative
相對位置

absolute
絕對位置

• 當元素設定position:absolute;後，就會尋找 若找不到，就會以目前網頁的body左上角為定位點

z-index
可設定元素的堆疊順序

• 只能用於像position這樣的定位元素上使用。
• z-index數字越大，圖層越前面 (預設值為0)
• 想設定元素間哪個圖層較上方，就設定z-index

z-index:1; /*權重較小*/
z-index:2; /*權重較大*/

相對定位relative+絕對定位absolute+z-index的排版方式

相對於float有使元素間併排的效果，relative與absolute可使元素重疊在一起。

• relative與absolute使用
  讓box在設定範圍(.frame)內移動 範例
  

  • .box如果設定position: absolute; 它就會開始找position: relative;在找不到的狀況下，會依照瀏覽器當座標 範例
  • 如果.frame未寫relative，.box則還是會依照瀏覽器為父元素範例
  • .box也可寫負的數值讓它和.frame重疊，可用此範例試試

• relative與absolute使用加入z-index使用
  banner與nav重疊
  

  • .banner範圍比.nav大，所以.banner設定relative，讓.nav跟隨 範例
  • 子元素.nav的父元素已經不是wraper而是banner了，所以記得寫高度與寬度才能顯示
  • .nav設定absolute後會被.banner覆蓋住，設定z-index的數值高於.banner即可顯示出來
  • 選單與banner合併範例

參考
關於 position 屬性文章