新手指南：理解 CSS position: relative 與 position: absolute 的關係

更新日期： 2024 年 9 月 14 日

在網頁設計中，定位是控制元素布局的核心技能之一。

CSS 提供了多種定位方式，其中 relative 和 absolute 是最常用的兩種。

這篇文章將幫助你理解這兩者的區別和關係，讓你在使用它們時更加得心應手。

什麼是 position: relative？

position: relative 是一種相對定位方式。

當你給一個元素設置 position: relative 時，這個元素會相對於它在正常文檔流中的位置進行定位。

簡單來說，元素的原始位置仍然保留在文檔流中，但你可以通過 top、right、bottom、left 等屬性對它進行偏移。

例子：position: relative 的應用

.relative-box {
  position: relative;
  top: 20px;
  left: 30px;
  background-color: #4CAF50;
  padding: 20px;
  color: white;
}

<div class="relative-box">這個元素相對於它的原始位置進行了偏移</div>

在這個例子中，.relative-box 會相對於它原本在文檔流中的位置向下偏移 20px，向右偏移 30px。值得注意的是，元素原本所佔據的空間依然保留，因此其他元素的位置不會受到影響。

什麼是 position: absolute？

position: absolute 是一種絕對定位方式。

當你給一個元素設置 position: absolute 時，它會脫離正常的文檔流，並且相對於最近的已定位祖先元素（即已設置 position 屬性且值不為 static 的元素）進行定位。

如果沒有已定位的父輩元素，則該元素會相對於整個瀏覽器視窗進行定位。

例子：position: absolute 的應用

.container {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: #e0e0e0;
}

.absolute-box {
  position: absolute;
  top: 20px;
  left: 30px;
  background-color: #FF5722;
  padding: 20px;
  color: white;
}

<div class="container">
  <div class="absolute-box">這個元素相對於 .container 進行定位</div>
</div>

在這個例子中，.absolute-box 會脫離文檔流，並相對於 .container（已設置 position: relative）向下偏移 20px，向右偏移 30px。.absolute-box 不會影響其他元素的佈局。

relative 與 absolute 的關係

理解 relative 和 absolute 的關係至關重要。

通常，我們會先給父元素設置 position: relative，這樣子元素設置 position: absolute 時，就會相對於這個父元素進行定位，而不是整個視窗。

例子：結合使用 relative 和 absolute

.container {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: #e0e0e0;
  border: 1px solid #333;
}

.absolute-box {
  position: absolute;
  top: 50px;
  right: 20px;
  background-color: #FF5722;
  padding: 10px;
  color: white;
}

<div class="container">
  <div class="absolute-box">我是絕對定位</div>
</div>

在這個例子中，.absolute-box 會相對於 .container 進行定位，因為 .container 設置了 position: relative。這樣，我們可以更靈活地控制 .absolute-box 在 .container 中的位置。

結語

理解 position: relative 和 position: absolute 之間的關係，是掌握 CSS 定位技術的關鍵。

relative 可以調整元素本身的位置，並作為 absolute 的參考點，而 absolute 讓你能夠脫離文檔流進行精確定位。

這兩者結合使用，可以讓你更靈活地設計網頁佈局，達到你想要的效果。

希望這篇文章能幫助你理解這兩個重要的 CSS 屬性，並在實際項目中靈活運用它們！