Leah's Life

轉貼自themes blog教學

--

position: static; /*預設*/
　　這代表被設定的區塊會被放在預設的地方
　　如果 position 的值是被設定為 statics 的話
　　那 top、bottom、left、和 right 的值就都沒有意義。

position: relative; /*相對位置*/
　　這代表被設定的區塊會以原本擺放的位置為基準點做相對位置設定
　　搭配了 top、bottom、left、和 right 之後
　　此區塊會位移到指定的位置上
　　而此區塊的父元素不會因此將此區塊浮動出框架
　　高度不會縮小

position: absolute; /*絕對位置*/
　　這代表被設定的區塊會直接位移到指定位置
　　搭配了 top、bottom、left、和 right 之後
　　此區塊會位移到指定的位置上
　　若此區塊的父元素無設定 position: relative;
　　就會推算至更外層有設定 position: relative; 的區塊為基準點
　　若所有父元素都沒有設定，則以瀏覽器框架 (body) 為基準點

position: fixed; /*固定位置*/
　　與 absolute 效果類似
　　一樣須搭配 top、bottom、left、和 right 的設定值
　　瀏覽器捲軸捲動時，不會隨頁面下拉消失，固定在畫面上的浮動效果
　　且無視所有外層的 relative 為基準點
　　直接以瀏覽器框架 (body) 為基準點
　　(IE6 並不支援此效果)

--

效果如下：


有需要上圖這個範例的html留言給我
以上~