版面又跑掉了？Framer 新手必修課：一次搞懂 Absolute 與 Relative 定位

Sam

• 2026/1/24

如果你也曾做過平面設計，我們習慣在 Canva、Illustrator 或 Photoshop 這類設計軟體中，會是「想把圖放哪、就拖到哪」的方式（也就是等等會提到的 Absolute (絕對定位) 的概念）。

但是！ 網頁設計的世界不一樣。它必須同時適應寬螢幕的電腦和窄螢幕的手機。為了達成這種響應式設計 (Responsive Design)，我們更常必須依賴 Relative (相對定位)。這能讓物件之間建立「相對應」的排隊關係，無論螢幕變大變小，內容都能自動乖乖排列，不會亂跑！

這篇文章我們將深入探討 Framer 中最重要的兩個定位概念：Relative（相對定位） 與 Absolute（絕對定位）。

讀完這篇，你將能夠：
1. 理解 Absolute 跟 Relative，在響應式設計（Responsive Design）當中如何應用。
2. 學會如何讓物件「漂浮」在其他內容之上（例如懸浮按鈕或標籤）。
3. 利用 Z-index 控制圖層的前後順序。

準備好了嗎？我們開始吧！

🖥️ Framer 的四大定位（Position）

在進入介紹 Absolute 與 Relative 的之前，我們先來稍微認識四種 Position，它們就像是有四種不同個性：

📌 Absolute (絕對定位)：自由奔放
它無視排隊規則，可以隨意「漂浮」在任何位置。適合用來做裝飾圖案、標籤。
🧱 Relative (相對定位)：乖乖排排站
這是 Framer 的預設值。所有物件都會依照順序、乖乖排列，互不重疊，是建立網頁結構的基礎。
⚓️ Fixed (固定定位)：站著不動
不管你怎麼滾動網頁，它永遠都會停在螢幕的同一個位置。最常見的用法就是永遠置頂的導覽列 (Navbar)。
🍬 Sticky (黏性定位)：半路煞車
它一開始會跟著大家一起捲動，但當它碰到螢幕邊緣時，就會「吸住」不動。常見於長篇文章的側邊目錄或長篇清單的標題。

知道這些個性的存在後，再把目光放回 Relative 跟 Absolute 兩大定位吧！

到底什麼是 Absolute 與 Relative？

Absolute 絕對定位：自由奔放

想像 Absolute 元素是個「不愛排隊」的人。它不佔據排隊的空間，不管如何，都不會影響到底下排隊的人群。

特點：你想放哪，就放哪。
優點：對於裝飾性的圖案、懸浮的按鈕（比如 Sale 標籤），非常方便。
缺點：當螢幕變窄（手機版）時，元素不會自動調整位置，很容易「跑出界」。

Relative 相對定位：乖乖排隊

Framer 的預設狀態。想像你跟一群人在排隊，如果你變胖了（尺寸變大），後面的人就得退後；如果你離開了，後面的人就會遞補。

這也是所謂 Document Flow（文檔流）。

特點：排列站好
優點：當螢幕變窄（手機版）時，元素會自動往下擠，不會亂成一團。

小測驗：如果把 Relative 變成 Absolute...？

你有一個直向的 Stack（自動佈局容器），裡面有三個元素，順序由上到下分別是：
圖片 (Image)、標題 (Title)、內文 (Text)

問題： 如果我選中中間的 「標題」，把它的 Position 從 Relative 改成 Absolute，請問會發生什麼事？

(A) 標題會消失不見。
(B) 標題會浮起來，原本在下面的「內文」會立刻往上遞補，填滿標題原本的位置。
(C) 標題會把圖片往下推，佔據更多空間。

如果不知道答案的話，就打開 Framer 操作看看吧～

回到 Framer，Position在哪裡設定呢？

打開你的 Framer，選中任何一個 Frame 或圖層，看向右側屬性面板 (Properties Panel)。

找到 Position 區塊。
你會看到 Type 的選項：預設通常是 Relative。
💡小小插播: 為什麼我看不到 "Relative" 選項？
可能是因為你的父層（Parent）不是 Stack 或 Grid。簡單來解釋「Parent-Child」(父子層級)的觀念： Parent (父層) 就像是制定規則的容器，而 Child (子層) 就是在裡面必須遵守規則的物件。所以沒有一個容器 (Parent)時，所有的 Child 都是自由的，你想把圖層放在哪就放在！Framer 預設就會是 Absolute (絕對定位)
當你切換成 Absolute 時，這時你會發現該元素四周出現了像是「釘書針」的樣子，這是做什麼用的呢？

拴住 Absolute 的自由靈魂：Pinning (釘選)

當我們把物件變成 Absolute 之後，它可以自由拖曳，但！隨之而來可能有問題：當你的網頁變寬或變窄時，該怎麼辦？

這時候，你就需要 Framer 面板上的 Pinning (釘選) 功能，它就像是用一條無形的繩子，把漂浮的元素「綁」在邊框上。

💡 最常見的三種 Pinning 設定

在 90% 的設計情境中，你只需要會用以下這三種組合，就能搞定響應式問題：

固定在角落（適用於：Sale 標籤、右上角關閉按鈕）
- 設定方式：同時釘住 [Top + Right] 或 [Top + Left]。
- 效果：不管螢幕怎麼變，這個元素就像貼紙一樣，永遠死守在那個角落，跟邊框保持固定的距離。
始終置中（適用於：圖片上的浮動文字、Play 按鈕）
- 設定方式：四個邊都不要釘（也就是讓線條保持灰色），或是點擊中間讓它自動對齊。
- 效果：Framer 會自動計算，讓這個元素永遠漂浮在父容器的正中央。
跟著變寬（適用於：搜尋欄、滿版裝飾線）
- 設定方式：同時釘住 [Left + Right]。
- 效果：當螢幕變寬時，你的物件會被迫跟著拉長；螢幕變窄時，它會跟著縮短。這在做手機版的搜尋框時非常有用！