今天的封面是拉長尾巴的 VS Code，還有奇怪的標題。因為最近我朋友日文 N1 考過了，為了慶祝他通過考試，特別在標題加了一個日文「の」字，以表示尊重。

直接進入主題！

昨天介紹完五大 Position 定位屬性，接下來最重要的就是「位移」了！在調整位置前，一定要先搞懂元素的定位基準，才能精準將它移動到理想的位置。今天將繼續帶大家看看，元素到底該怎麼調整位置！

元素位移

在確定元素的 position 屬性後，下一步是使用位移屬性來調整元素位置，將其精確放置在需要的位置上。例如按鈕需要靠右下角擺放，或是元素需要水平垂直置中，這些位置調整都需要運用位移相關的屬性。

Top、Bottom、Left、Right

top、bottom、left、right 屬性定義了，元素距離參考點的上下左右距離。

.element-1 {
  position: relative;
  top: 20px;      /* 距離頂部 20px */
  left: 50px;     /* 距離左邊 50px */
}
   
.element-2 {
  position: absolute;
  bottom: 40px;   /* 距離底部 40px */
  right: 30px;    /* 距離右邊 30px */
}

特性

• position 不是 static 時，才可以使用此屬性調整元素位置。

• 設定元素與參考點的上下左右「距離」。

• 「參考點」根據元素的定位方式而有所不同：

  

• 設定上下左右的距離，可使用像素或百分比。

  • 預設值：auto
  • 像素：10px （距離參考點 10px）
  • 百分比：50%（相對於父元素的寬/高）

• 只設定 top、 bottom 其中一個，以及只設定 left 、 right 其中一個，以避免衝突。

範例

• 寬度為 200px、高度為 100px 的容器內，有著一個元素，內元素設定 top 50%、left 50%，表示這個元素會距離容器底部 50px（容器高度的一半），且會定位在距離容器左側 100px（容器寬度的一半）的位置。

  .box {
    position: relative;
    width: 200px;  /* 設定寬度 */
    height: 100px; /* 設定高度 */
    border: 1px solid #000;
    .item {
      width: 20px;
      height: 20px;
      background: #666;
      position: absolute;
      left: 50%; /* 距離左邊 50%：200*50% = 100px */
      top: 50%;  /* 距離頂部 50%：100*50% = 50px */
    }
  }
  

  

  以上定位結果會使元素位於父容器的中央偏下位置。這是因為我們只設定了與上方及左側的距離，但沒有考慮元素本身的尺寸。若要讓元素完全置中，需要再扣除元素本身寬高的一半，此時可搭配 transform: translate() 來實現元素完全置中。

Transform: translate()

除了上述 top、bottom、left、right 屬性可以對元素進行位移外，transform: translate() 也能實現元素位移。由於 transform 屬性的主要目的是用來「變形」元素，而「位移」只是 transform 的其中一項功能，以下會針對位移功能進行說明，後續再另外補充其他功能。

.element {
  transform: translate(50px, 20px); /* 向右移動 50px，向下移動 20px */
  transform: translateX(50px);      /* 向右移動 50px */
  transform: translateY(20px);      /* 向下移動 20px */
}

特性

• 無關於 position 屬性，就算是 static 也能使用，因此偏移後也不影響其他元素的位置。

• 此屬性主要是用來實現元素「變形」效果，「位移」只是其中一種功能。

• 可設定 X 軸與 Y 軸的位移量，支援像素、百分比和。

• 設定 X 軸與 Y 軸的位移量，可使用像素或百分比。

  • 預設值：0（原地）

  • 像素：10px（位移 10px）

  • 百分比：50%（位移元素自身的尺寸比例）

    例如：元素寬 50px、高 40px，使用 translate(50%, 50%) 會往右移動 25px、往下移動 20px。

    .example {
      width: 50px;    /* 元素寬度 */
      height: 40px;   /* 元素高度 */
      background: #000;
      /* 往右移動 25px (50px*50%)，往下移動 20px (40px*50%) */
      transform: translate(50%, 50%);  
    }
    

範例

• 元素垂直水平置中：transform: translate(-50%, -50%) 搭配 position: absolute 和 top: 50%; left: 50%

  .center-element {
    position: absolute; /* 元素絕對定位 */          
    top: 50%;  /* 讓元素的上邊緣位於父容器高度的 50% 處 */
    left: 50%; /* 讓元素的左邊緣位於父容器寬度的 50% 處 */
    transform: translate(-50%, -50%); /* 將元素向左上移動自身尺寸的 50% */
  }
  

  

• Hover 位移效果：滑鼠移入時的元件偏移。

  .button {
    transform: translateY(0);
    &:hover {
  	  transform: translateY(-5px); /* 滑鼠移入往上移動 5px */
  	}
  }
  

z-index

當使用了許多定位後，可能有些元素會互相遮擋。這時候就需要用 z-index 屬性來定義元素顯示的先後順序。

特性

• 預設值為 auto（等同於 0）。
• 只對已定位元素有效（position 不是 static）。
• 數值越高，元素就越上層（上層能遮蓋下層元素）。
• 當多個元素具有相同 z-index 值時，在 HTML 程式碼中較後面的元素會位於上層。
• 數值可以是負值（但父元素若設有背景顏色，具有負值 z-index 的元素將會被背景顏色覆蓋）。
• 子元素的 z-index 只在父元素中有效（如果子元素被其他外層元素遮擋，表示父元素的 z-index 較低）。

使用範例

1. 全螢幕覆蓋半透明色塊

   .overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background: rgba(0, 0, 0, 0.5);
   }
   

2. 卡片右上角加上標籤

   .card {
     position: relative;
   }
   
   .badge {
     position: absolute;
     top: -10px;
     right: -10px;
   }
   

總結

昨天跟今天探討了 CSS 定位屬性，從各種定位方式到位置偏移及層級控制。透過這些技術和實例，你現在能夠：

1. 掌握不同定位類型（static、relative、absolute、fixed、sticky）的特性與應用
2. 善用 top、bottom、left、right 屬性精確控制元素位置
3. 運用 transform: translate() 實現元素位移與置中效果
4. 透過 z-index 管理元素層級關係

熟練掌握這些定位相關屬性後，你將能建構出結構更合理的網頁排版。下面將總結各種定位方式的特點和適用情境，幫助你在實際開發中選擇最適合的定位策略。