[CSS] position定位

CSS裡有一個非常重要的屬性,就是position,善用它,將無往而不利。
主要目的是在做定位,共有四種可選:staticfixedrelativeabsolute,以下就依這四個屬性值來稍做解釋。

先來一個簡單的HTML範例代碼:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  
    <style>
      .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;
      }
    </style>
  </head>
  <body>

    <div class="theDiv">
      <p class="p_margin_set_zero">this is p1</p>
      <p class="p_margin_set_zero theP">this is p center</p>
      <p class="p_margin_set_zero">this is p2</p>
    </div>

  </body>
​</html>

很容易地,以上html就是呈現出下圖:
static定位

1、static

所有的html預設定位都是static,也就是依網頁原本的流向,不做任何變動。所以其實以上面原來的範例來說,<div><p>其實都是position:static;

 

2、fixed:鎖定定位

將某個html的元素, post ion設定成fixed,即position:fixed;,是表示此html是固定在視窗畫面上,即使畫面捲軸移動,該特定元素還是會定在畫面上。例:將.theDiv改成以下:

.theDiv{
  border:1px solid black;
  width:200px;

  position:fixed;  /*新增這行*/
}

然後隨意新增網頁內容至有捲軸出現為止,試著移動捲軸看看,會發現<div class="theDiv">還是會定在畫面原來的位置上,例如圖:
fixed定位

 

3、relative:相對定位

若某個html元素設定成position:relative;,則表示可以使用topbottomleftright這四種屬性,來針對原來位置做移動,且不影響周圍其它元素的位置。例將.theP改成以下:

.theP{
  background-color: #b1b1b1;
  border:1px solid black;
  width:100px;

  position:relative;  /*新增這行*/
  top:10px;           /*新增這行*/
}

顯示如下圖,往下挪了10px,但並不影響其它周圍元素的位置(可將top改成用margin-top看其差異喔):
relative定位

 

4、absolute:絕對定位

將某個html設定position:absolute;,則表示此元素已脫離網頁原先流向,它會去找上層有設position:relative;的元素,再搭配topbottomleftright來對此元素做定位。例如將.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″會往上移了):
absolute定位

哈,相信這樣應該對position已經不會太陌生了,現在就是練習練習再練習了。

 

參考資料:
htmldog:Page Layout