♂月橘館♀

在設計部落格樣式時，位置語法「position」可說是最常使用的語法

常見的語法有絕對位置：absolute及相對位置：relative這兩種

常見參數：top、bottom、right、left 。(上下右左)

下面我用網誌描述(banner h2)為例子來作介紹：

接下來請大家用「座標」的概念會比較好理解

下圖的O點為瀏覽器的左上角部份，A點為網誌描述的原本位置。

1.絕對位置：absolute：以瀏覽器畫面中的原點O(0,0)為起點來定義位置

　語法：banner h2{ position:absolute ; top:50px ; left:50px;}

　網誌描述移動到 B 點(50,50)的位置

　B 點離上方 50px 左方 50px ，想成從原點往右下移了各50px的距離 

2.相對位置：relative：相對位置就是把原本的「預設」位置 A 點作為新的原點來作位移

　語法：banner h2{ position:relative ; top:50px ; left:50px;}

　網誌描述移動到 C 點(100,50)的位置　

※相同的距離但是用絕對及相對位置語法所產生的位置是不同的喔！ 

應用：滑鼠移到超連結上頭時，會有按壓的效果

　　　a:hover{ position:relative ; top:1px ; left:1px;}

　　　表示當滑鼠移到超連結時，會往「右下」移動1px的距離

其他：

3.固定位置：fixed：不會因為捲軸往下拉而跟著捲動

　語法：banner h2{ position:fixed ; top:50px ; left:50px;}

　不管捲軸怎麼往下拉，網誌描述會永遠出現在你畫面中的 B 點位置。  

以上為位置語法的簡單介紹。

只要掌握座標這個概念，基本上應該沒有什麼問題。

一般來說，各個欄位的移動大多是用絕對位置來定義比較多；

相對位置以我的習慣來說，幾乎都是用在超連結效果方面；

固定位置通常是用在固定背景圖上比較多。

如果妳覺得這篇不錯的話
請留個回應或是幫忙點一下旁邊的廣告給我當獎勵喔
不回應的話，我只好這樣做

本文歡迎轉載、引用，但請註明出處
圖片、檔案皆存放於本人空間
如欲再行分享，請上傳至自己的空間
勿以本人空間再行分享之實！
請注意網路禮儀！