spotlight_title
轉貼自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留言給我
以上~
, ,

Leah 發表在 痞客邦 PIXNET 留言(8) 人氣()


留言列表 (8)

發表留言
  • 悄悄話
  • HeartStealer
  • 的確已過了好幾個月了...
    不過也辛苦你啦
    看你最近都在喊累
  • 鈴音
  • 想問李亞,那個兩欄並排的欄位到底
    要怎麼改咧?就是你的文章連結右邊的欄位和右邊的logo連結的那要用成並排到底要如何改?一直想學這個>"<
    剛剛改了死筆系列不知好不好看^^
  • patty30925
  • 耶~~~很謝謝李亞姐!!
    總算找到這個了,正需要呢TˇT
  • afterdying
  • 我也要~XD!!!~~
    現在設計CSS真是太好完哩~
    只不過每次我都要一次設計完,
    整個超花時間的~
  • 請悄悄畫留下您的mail
    待我星期一可以寄給你

    Leah 於 2010/06/06 19:15 回覆

  • 悄悄話
  • 唯
  • 不好意思leah
    我忘了怎麼讓category不自動伸縮(像你的那樣)
    在留言裡也找不到之前你回复我的語法
    只好厚著臉皮再來找請教你
  • #category .inner-box ul { display: block !important; }
    這樣就可以了

    Leah 於 2010/08/31 15:33 回覆

【 X 關閉 】

【PIXNET 痞客邦】國外旅遊調查
您是我們挑選到的讀者!

填完問卷將有機會獲得心動好禮哦(注意:關閉此視窗將不再出現)

立即填寫取消