除了一般的屬性設定和 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

themes 發表在 痞客邦 PIXNET 留言(5) 人氣()


留言列表 (5)

發表留言
  • 悄悄話
  • 小雨
  • 您好, 我想請問, 如何將分類的留覽方式固定成"標題列表" ?
    也就是點入分類, 出現的文章以標題列表的方式呈現.
    謝謝您
  • 您好, 這是站內功能的預設模式,
    並不提供直接進入標題列表的方式...(僅所有文章會如此呈現)
    還請多見諒。
    -
    您若真的很介意這點, 可以在自訂欄位寫一個自己的分類,
    將連結都指定到 標題列表頁...
    但這樣會有些費工便是。

    themes 於 2010/10/21 10:44 回覆

  • 悄悄話
  • 霓馨银雨
  • 想請問一下,
    每一個部落格樣式都有著連接到相簿,留言板,名片,以及部落格本身。
    但是我想要將這些改稱以及更改其連接,應該要怎樣改???就像是這裡的改成了痞客哈燒STYLE, 哈燒樣式研究院, 痞客部落小技巧, 部落樣式精選和相簿樣式精選,而我想要更改,應該要怎樣呢???
    謝謝您
  • 悄悄話