Position

很多人都會用圖層來製作網頁，或許常會聽到所謂的絕對位置和相對位置。其
實它們都是 CSS 中 position 的設定值，透過設定 position ，便能讓我們隨意移動元素的位置

參考網站：http://www.w3school.com.cn/css/pr_class_position.asp
Position

一、position 參數說明
  1. static (預設值):

    (1)元素position屬性默認值為static

    (2)position:statics則top、bottom、left、和 right 的值都無意義

    (3)通常此屬性可不設置，除非要覆蓋之前的定義

  2. absolute:

    (1)這代表元素會被放在瀏覽器內的某個位置
    (依 top、bottom、left、和 right 的值而定)。

    (2)當使用者將網頁往下拉時，元素也會跟著改變位置。

  3. relative:

    (1)這代表元素被放的地方將會與預設的地方有所不同。

    (2)不同的程度是依照 top、bottom、left、和 right 的值而定。

  4. fixed:

    (1)這代表元素會被放在瀏覽器內的某個位置
    (依 top、bottom、left、和 right 的值而定)。

    (2)當使用者將網頁往下拉時，元素的位置不會改變。

二、掌握CSS定位(0)
三、掌握CSS定位(static靜態位置)
  1. Position:static靜態位置(預設)
  2. top、bottom、left、和 right 設定皆無意義
    3. Position:static靜態位置(預設)
四、掌握CSS定位(relative相對位置)
  1. 設置position:relative，可結合top、bottom、left、right屬性來偏移其常規位置。
    例如：div-abc向下移動50像素、向左移動50像素
  2. 每個元素在頁面中會有【佔用】一個位置，而相對定位就是將元素偏離元素的預設位置，
    但普通流中依然保持著原有的位置，並沒有脫離流，只是視覺上發生的偏移
  3. 同時設定margin屬性時仍然有效，導致加成元素位置相對位置，故建議設置position:relative不要同時設置margin資料，
    因很難精確元素的定位，儘量減少干擾因素
    4. Position:relative相對位置
五、掌握CSS定位(Absolute：絕對定位)
  1. Absolute：絕對定位

    將元素放在任何想放的位置

    • 說明

      • (1)畫面位置參考基準：父元素內容區邊界

      (2)依循著父元素來確定【根】，然後相對這個【根】元素來偏移

      (3)所有父元素都沒有設置position屬性值 則該元素最終將對body進行位置偏移

      (4)與［relative_absolute］呼應

      Absolute：絕對定位
  2. 父元素Relative_子元素Aabsolute
    • 說明

      (1)畫面位置參考基準：父元素內容區邊界

      (2)依循著父元素來確定【根】，然後相對這個【根】元素來偏移

      (3)因父元素設置position屬性值為Relative，故子元素針對父元素進行位置偏移

      (4)position: absolute忽略父元素的padding

      父元素Relative_子元素Aabsolute
  3. TwoColumnAbsolute
    • 說明

      (1)使用relative_absolute 實現div-a及div-b的絕對定位

      (2)使用絕對定位的優點就是不需考慮元素位置，可以對元素任意放置
      　　此處故意將div_b放到div_a之前

      (3)但其他元素被絕對定位的元素遮住了，怎麼辦？

      TwoColumnAbsolute
  4. TwoColumnAbsoluteHeight
    • 說明

      (1)使用relative_absolute 實現div-a及div-b的絕對定位
      (2)其他元素被絕對定位的元素遮住了，怎麼辦？
      　　可利用父元素固定高度
      　　但不是萬全之策，因元素高度、字體的大小總是不確定的。

      TwoColumnAbsoluteHeight
六、掌握CSS定位(float(浮動))
  1. float(浮動)
    • 說明

      (1)針對高度不定的情況，絕對定位不好用，於是想到另一方案。

      (2)可盡量使用向左或向右浮動來實現文字環繞，特別是環繞圖片，
      　　此處用於更複雜的佈局工作 (也只有用這種方法)

      float(浮動)
  2. FloatColumns(兩欄浮動)

    將兩列都像左浮動，可以實現兩列並列

    float(浮動)
  3. 多列浮動後，停止後續元素浮動

    將元素浮動後，再使用“clear” 清除浮動，後面內容自動排列

    多列浮動後，停止後續元素浮動
gotop