HTML CSS position 屬性

今天要筆記的項目就是 position 屬性，包含 static, relative, absolute 和 fixed，會盡量用比較的方式，看出四種不同之處。

static

首先先說明預設的 static，只要沒有特別設定 position 就一定會是 static 唷！
它的特性就是：

會跟著瀏覽器頁面做排版
滑動頁面的時候會跟著滑動
沒有多餘的參數

舉例時間（為了方便觀看我還是把 position: static; 寫上去了，但是就算省略這一行，頁面也會長一樣唷）：

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>The HTML5 Herald</title>
  <link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
  <style>
    .explain {
      position: static;
      background: yellow;
      border: 2px solid black;
      padding: 20px 10px 20px 10px;
      margin: 10px 10px;
    }
  </style>
</head>

<body>
  <div class="explain">
    我是一條 bar！
  </div>
</body>
</html>

這個時候畫面是長這樣的，當頁面需要往下拖移，這一條 bar 也會跟著消失不見：

relative

再來是定位方式跟 static 長得很像的 relative，中文應該可以翻譯成相對定位：

會跟著瀏覽器頁面做排版
滑動頁面的時候會跟著滑動
可以加入 top, right, bottom 和 left 參數

利用第二條 bar 做舉例，將第二條 bar 的 class 命名為 explain__relative 並且將他的 css 屬性沿用第一條 bar，將 position 改為 relative 再加上 top, right, bottom, left 各 30px ：

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>The HTML5 Herald</title>
  <link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
  <style>
    .explain {
      position: static;
      background: yellow;
      border: 2px solid black;
      padding: 20px 10px 20px 10px;
      margin: 10px 10px;
    }
    .explain__relative {
      position: relative;
      top: 30px;
      left: 30px;      
      background: yellow;
      border: 2px solid black;
      padding: 20px 10px 20px 10px;
      margin: 10px 10px;
    }
  </style>
</head>

<body>
  <div class="explain">
    我是一條 bar！
  </div>
  <div class="explain__relative">
    我是第二條 relative bar！
  </div>
</body>
</html>

客倌，上圖：

可以發現除了位置往下往右都飄移了 30px，講的容易懂一點應該是：我要跟上面差 30px、跟左邊差 30px，其他的和 static 並沒有太大的差異。

這邊要補充一點，relative 是基於誰來定位呢？並不是他的上一個 bar，其實是基於「我在 relative 之前應該在的位置」，這樣講有點抽象，如果我直接把第二條 bar 複製一份，就可以看得出來了：

紅色的框框就是「我在 relative 之前應該在的位置」，而加上 relative 屬性之後就飄移了，飄移的根據就是紅色框框的位置摟！（紅色框框是我自己畫的，程式跑起來不會有）

absolute

有相對定位就一定會有絕對定位，先來看看 absolute 的特性：

不會跟著瀏覽器頁面做排版，參數設定哪就會長在哪邊
滑動頁面的時候會跟著滑動
可以加入 top, right, bottom 和 left 參數

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>The HTML5 Herald</title>
  <link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
  <style>
    .explain {
      position: static;
      background: yellow;
      border: 2px solid black;
      padding: 20px 10px 20px 10px;
      margin: 10px 10px;
    }
    .explain__relative {
      position: relative;   
      background: yellow;
      border: 2px solid black;
      padding: 20px 10px 20px 10px;
      margin: 10px 10px;
    }
    .explain__absolute {
      position: absolute;
      top: 30px;
      left: 30px;      
      background: yellow;
      border: 2px solid black;
      padding: 20px 10px 20px 10px;
      margin: 10px 10px;
    }
  </style>
</head>

<body>
  <div class="explain">
    我是一條 bar！
  </div>
  <div class="explain__relative">
    我是第二條 relative bar！
  </div>
  <div class="explain__absolute">
    我是第三條 absolute bar！
  </div>
</body>
</html>

先把 relative bar 的 top, left 刪掉，做一條 absolute bar，圖會長這樣：

一樣的問題， absolute bar 的 top, right, bottom, left 是基於誰呢？是基於「上層不是 static 的第一個物件」，在上面的圖，因為他上層沒有「上層不是 static 的第一個物件」，所以是使用瀏覽器頁面來做定位，那麼如果我把 absolute bar 加在 relative bar 的下層，他的「上一層不是 static 的第一個物件」就會是那一條 relative bar，程式碼 div 就會長這樣：

  <div class="explain__relative">
    我是第二條 relative bar！
    <div class="explain__absolute">
      我是第三條 absolute bar！
    </div>
  </div>

圖片如下：

fixed

fixed 跟 absolute 是比較相像的，特性如下：

不會跟著瀏覽器頁面做排版，參數設定哪就會長在哪邊
滑動頁面的時候不會跟著滑動，會定位在一開始頁面的位置
可以加入 top, right, bottom 和 left 參數

先只保留第一條 bar，並且加上第四條 fixed bar，為了觀看滑動頁面的樣子，我把 body 的高設為 1280px，程式碼如下：

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>The HTML5 Herald</title>
  <link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
  <style>
    body {
      height: 1280px;
    }

    .explain {
      position: static;
      background: yellow;
      border: 2px solid black;
      padding: 20px 10px 20px 10px;
      margin: 10px 10px;
    }
    .explain__relative {
      position: relative;   
      background: yellow;
      border: 2px solid black;
      padding: 20px 10px 20px 10px;
      margin: 10px 10px;
    }
    .explain__absolute {
      position: absolute;
      top: 30px;
      left: 30px;      
      background: yellow;
      border: 2px solid black;
      padding: 20px 10px 20px 10px;
      margin: 10px 10px;
    }
    .explain__fixed {
      position: fixed;      
      background: yellow;
      border: 2px solid black;
      padding: 20px 10px 20px 10px;
      margin: 10px 10px;
    }
  </style>
</head>

<body>
  <div class="explain">
    我是一條 bar！
  </div>
  <div class="explain__fixed">
    我是第四條 fixed bar！
  </div>  
</body>
</html>

圖片如下：

fixed 一開始看起來沒有什麼特別的，因為他的特色要到滑動頁面之後才會浮現，如果我把頁面往下滑，就會長這樣：

其他物件會跟著跑，但是 fixed 不會！