【 Framer】Laylout-Position 介紹：絕對定位

前言

網頁的定位方式主要有以下這幾種：

• 絕對定位（Absolute）：可以自由定位圖層，相對於其父層進行定位。
• 相對定位（Relative）：位置取決於內容在堆疊或網格中的排列方式。
• 固定定位（Fixed）：圖層的位置固定在視窗上，無論頁面如何滾動都不會改變。
• 黏性定位（Sticky）：當圖層到達視窗頂端時，從相對定位切換為固定定位，離開父層範圍時再切回相對定位。

本文將帶你深入了解 Framer 的絕對定位，並教你如何靈活運用在實際專案中。

絕對定位（Absolute Positioning）

簡單來說，絕對定位讓你可以將元素（可以理解成物件/圖片/一段文字/一個裝飾物）放置在畫面上的任何位置，而不受其他元素的影響。也就是元素直接依據你設定的位置與數值進行擺放。這種方式非常類似於我們在 Figma / photoshop/illustrator 中自由拖拉圖層感覺。

在 Framer 中，絕對定位的元素會相對於父層框架（Parent Layers）來定位。無論是距離上方、下方、左側或右側，你都可以精確地設定數值，讓設計達到你想要的效果。

在 Framer 上的操作

絕對定位的核心概念

• 絕對定位的圖層：可以想像成「浮動」的，您可以隨意移動它們，完全不必考慮其他同層圖層，只需專注於與父層的相對位置。
  接下來的示範圖片或影片，需要了解的有：
  -藍色背景：父層框架（Parent Layers）。
  -紅色方形：子層物件（Children Layers）與圓形為sibling layers，絕對定位作用在此物件。
  -綠色圓形：子層物件，與方形為sibling layers，相對定位。

• 與設計工具的差異：在 Figma 或 Sketch 中，我們用 X、Y 座標來定位（通常以左上角為基準）。而在 Framer 中，則使用「釘選（Pinning）」和「Positioning」的組合，這更符合網頁設計中 HTML 和 CSS 的邏輯。

釘選（Pinning）與位置設定

• 釘選的概念：釘選某個邊緣（例如上方 20 像素）表示您希望這個距離在父層改變大小時保持不變。
• 未釘選的邊緣：如果不釘選，則代表不在意與父層之間的距離是否會改變，適用於需要隨父層縮放的設計。
• 釘選控制方式：可以透過屬性面板手動輸入數值或直接點擊釘選控制按鈕來切換釘選狀態。點擊中央按鈕可以快速切換「釘選所有邊」或「不釘選任何邊」，此時圖層會以父層的中心為基準。

釘選的影響範圍

• 父層大小改變時：釘選會確保圖層與父層之間的間距保持一致。
• 子層大小改變時：例如，當釘選了右上角，並調整子層的寬度，與右邊的距離仍會維持設定的固定間距，避免每次調整尺寸後還要重新定位。
• 響應式設計的重要性：良好的釘選設定可以幫助設計在不同裝置和螢幕尺寸下自動適應，無需額外調整。

絕對定位與堆疊（Stacks）的互動

• 相對定位的堆疊行為：在垂直堆疊中，所有子層會依序排列，拖曳僅能在堆疊內重新排序。
• 切換為絕對定位：將某個子層從相對定位切換為絕對定位後，該圖層會脫離堆疊的排列規則，可以自由拖曳定位。
• 圖層重疊問題（Z-Index）：切換為絕對定位後，系統會自動為該圖層設定 z-index，來控制層級的前後順序。z-index 數值越高，圖層越靠前；數值相同時，則依照圖層面板中的順序決定前後關係。

Recap

1. 絕對定位 = 自由定位，可像在 Figma、Sketch 中一樣隨意拖曳圖層。
2. 釘選（Pinning）+ 位置設定 = Framer 中取代 X、Y 座標的核心定位邏輯。
3. 釘選決定響應式行為，良好的釘選設計有助於自適應不同螢幕尺寸。
4. 與堆疊互動時，絕對定位的圖層會脫離堆疊的內容流，但仍可透過 z-index 控制圖層前後順序。
5. z-index 控制圖層層級，數值越高越在前，與圖層排序無關。

使用時機

為什麼要使用絕對定位？

• 精確控制位置：當你需要將某個按鈕或裝飾圖案放在特定位置時，絕對定位能讓你輕鬆完成。
• 製作浮動元素：例如固定在角落的返回按鈕、標籤或提示框，都可以使用絕對定位實現。
• 創造視覺層次：絕對定位可讓元素自由重疊，達到豐富的視覺效果。
  

什麼時候不適合使用絕對定位？

雖然絕對定位提供了極大的自由度，但它並非適用於所有情況。

• 響應式設計挑戰：絕對定位的元素不會自動調整位置或尺寸，可能在不同螢幕尺寸下出現錯位。
• 內容變動限制：當內容動態變化時，絕對定位的元素可能需要手動調整位置，增加維護成本。
• 結構複雜度增加：大量使用絕對定位可能讓你的設計層次混亂，影響後續的修改與維護。

常見錯誤與排除技巧

即使掌握了基本技巧，設計師在使用 Framer 絕對定位時仍可能遇到一些常見問題。這裡列出幾個常見錯誤及其解決方案，幫助你快速排除障礙。

1. 元素定位錯誤：確保絕對定位的元素是在正確的父層框架內。若位置不如預期，檢查父層是否正確設置。
2. 重疊元素無法點擊：若元素被其他絕對定位元素遮蓋，使用 Z-Index 調整層級，或檢查是否有透明元素阻擋。
3. 在不同螢幕尺寸錯位：檢查釘選設置，確保元素在各種螢幕尺寸下能保持一致位置。

即

參考：Framer Academy

想學更多 Framer 技巧嗎？ 持續關注鈕扣，解鎖更多設計秘訣！