Zi 字媒體
2017-07-25T20:27:27+00:00
此篇文章瀏覽量：
810
CSS裡有一個非常重要的屬性，就是position，善用它，將無往而不利。
主要目的是在做定位，共有四種可選：static、fixed、relative、absolute，以下就依這四個屬性值來稍做解釋。
先來一個簡單的HTML範例代碼：
.theDiv{
border:1px solid black;
width:200px;
}
.p_margin_set_zero{
margin:0;
width:100px;
}
.theP{
background-color: #b1b1b1;
border:1px solid black;
width:100px;
}
this is p1
this is p center
this is p2
很容易地，以上html就是呈現出下圖：
1、static
所有的html預設定位都是static，也就是依網頁原本的流向，不做任何變動。所以其實以上面原來的範例來說，、其實都是position:static;。
2、fixed：鎖定定位
將某個html的元素，postion設定成fixed，即position:fixed;，是表示此html是固定在視窗畫面上，即使畫面捲軸移動，該特定元素還是會定在畫面上。例：將.theDiv改成以下：
.theDiv{
border:1px solid black;
width:200px;
position:fixed; /*新增這行*/
}
然後隨意新增網頁內容至有捲軸出現為止，試著移動捲軸看看，會發現還是會定在畫面原來的位置上，例如圖：
3、relative：相對定位
若某個html元素設定成position:relative;，則表示可以使用top、bottom、left、right這四種屬性，來針對原來位置做移動，且不影響周圍其它元素的位置。例將.theP改成以下：
.theP{
background-color: #b1b1b1;
border:1px solid black;
width:100px;
position:relative; /*新增這行*/
top:10px; /*新增這行*/
}
顯示如下圖，往下挪了10px，但並不影響其它周圍元素的位置(可將top改成用margin-top看其差異喔)：
4、absolute：絕對定位
將某個html設定position:absolute;，則表示此元素已脫離網頁原先流向，它會去找上層有設position:relative;的元素，再搭配top、bottom、left、right來對此元素做定位。例如將.theDiv及.theP分別改設成以下：
.theDiv{
border:1px solid black;
width:200px;
position:relative; /*新增這行*/
}
.theP{
background-color: #b1b1b1;
border:1px solid black;
width:100px;
position:absolute; /*新增這行：採絕對定位*/
top:0; /*新增這行：往上層找到relative之後，距離上邊界為0px*/
right:10px; /*新增這行：往上層找到relative之後，距離右邊界為10px*/
}
經由以上CSS的設定後，如圖(且發現”this is p2″會往上移了)：
哈，相信這樣應該對position已經不會太陌生了，現在就是練習練習再練習了。
參考資料：
htmldog：Page Layout
若覺得文章有幫助，請多分享，讓其他同好也能吸收網站技能知識。
Facebook
Twitter
寫了
5860316篇文章，獲得
23313次喜歡