FINE LOOK in PIXNET

除了一般的屬性設定和 float 的應用之外，在樣式中也很常用的就是「position」
也就是位置的運用，這個方法在很多地方都很實用。

例如比較厲害的部落客可以選擇喜歡的樣式後對自訂欄位做一些想要的連結後定位到任意位置

--

position 共有四種設定值：

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 並不支援此效果)

--

說明完是不是還是有點不太懂呢?
搭配下圖應該就能夠更明白了 :)





當這個技巧應用在 pixnet blog 時有什麼可以應用的對象呢?
我們下次再介紹更詳細的應用狀況囉~
希望大家都可以實際測試看看，或是打開後台的：樣式設計精靈 » CSS 原始碼編輯
看看提供樣式的作者是把 position 應用在哪個地方的

大部分是部落格的主要選單「相簿、部落格、留言版、名片」連結的區塊
可以先去參考看看別人怎麼用
再實際自己測試，希望資訊對大家都有幫助~
下次再見囉~ :D