HTML CSS position 屬性


Posted by fang on 2020-08-02

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

static

首先先說明預設的 static,只要沒有特別設定 position 就一定會是 static 唷!
它的特性就是:

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

舉例時間(為了方便觀看我還是把 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,中文應該可以翻譯成相對定位:

  1. 會跟著瀏覽器頁面做排版
  2. 滑動頁面的時候會跟著滑動
  3. 可以加入 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 的特性:

  1. 不會跟著瀏覽器頁面做排版,參數設定哪就會長在哪邊
  2. 滑動頁面的時候會跟著滑動
  3. 可以加入 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 是比較相像的,特性如下:

  1. 不會跟著瀏覽器頁面做排版,參數設定哪就會長在哪邊
  2. 滑動頁面的時候不會跟著滑動,會定位在一開始頁面的位置
  3. 可以加入 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 不會!

之後再來更新補上 sticky,也是一個常用的屬性,只是因為比較新,最近還在嘗試中。


#html #css #position







Related Posts

Jōtai 介紹

Jōtai 介紹

JavaScript 五四三 Ep.03 Array.prototype.filter()

JavaScript 五四三 Ep.03 Array.prototype.filter()

MTR04_1012

MTR04_1012


Comments