[CSS] position定位

css icon

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的元素,postion設定成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

[CSS] box model

css icon

相信會寫CSS的同好們,一定對CSS不陌生,但box model在CSS的角色裡扮演著非常垂要的地位,如果你是初學者,務必搞懂:全部的html元素,都是box model概念。學會之後,未來在css對html的調效中,都將非常有幫助。

box model圖示:
box model
所有的html標籤裡除了內文之外,都還包含了padding(內距)、border(邊框)、邊距(margin)。

另外值得注意的:
一、css裡的width屬性指的是包含了哪部份:僅包含段落(即白色區域)。所以其實整個元素的總寬度=width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

二、當兩個html元素碰在一起時,邊距該如何算呢:

<!doctype html>
  <html>
    <head>
      <meta charset="utf-8">
      <style>
      .para{
        border:50px solid black;
        width:50px;
        padding:50px;
        margin:50px;
      }
      </style>
    </head>
    
    <body>
      <p class="para">段落1</p>
      <p class="para">段落2</p>
    </body>
  </html>

以上html及css原始碼顯示結果如下圖:會發現上下兩個的margin會被合併成只有50px,而不是100px。事實上是會取較大一個margin數值。
邊距上下差50px

但如果將.para這個css改成以下:

.para{
  border:50px solid black;
  width:50px;
  padding:50px;
  margin:50px;
  display:inline-block;
}

即將.para兩個<p>元素改成行內區塊(display:inline-block;)元素,顯示結果如下:中間的margin會變成100px(50px + 50px),瞭解其差異性了嗎?
邊距差100px

三、行內元素(例:<span>):如果是行內元素(display:inline;),設定margin-topmargin-bottompadding-toppadding-bottom會無效。後續會另開專文撰寫關於display屬性。