CSS 定位：元素放置的終極指南

大家好，歡迎回到我的部落格！ ？

無論您是經驗豐富的開發人員還是剛接觸 CSS，本文都會為您提供一些額外的知識和範例！

CSS 定位簡介

CSS 定位決定了元素將出現在文件流程中的位置。預設情況下，所有元素都遵循自然流從左到右、從上到下，稱為靜態定位

。然而，CSS 提供了四種其他定位模式，允許對元素放置進行更多創造性的控制。

靜態定位 - 預設行為

當元素具有position: static（預設）時，它會根據頁面的正常流程*進行定位。將其視為一個接一個排列的元素，無需特別注意它們在自然文件結構之外的位置。

範例：

.static-element { position: static;}

正常流程：元素依照從左到右、從上到下的順序依序佈局，除非透過浮動、彈性盒或網格進行修改。

？很高興知道

：

• 塊元素

  ：它們垂直堆疊，每個新元素從最後一個元素下方開始。

• 內嵌元素

  ：它們水平流動，只佔用其內容所需的寬度。

相對定位 - 視角的轉變

相對定位

相對於其正常位置移動元素，而不改變其周圍的佈局。這就像將元素稍微偏離其原始位置，但在文件流程中保留其空間。

範例：

.relative-element {
    position: relative;
    top: 10px; /* Moves the element down by 10 pixels */
    left: 20px; /* Moves the element to the right by 20 pixels */
}

？很高興知道

：相對定位很簡單，但常被誤解：

• 保留空間

  ：保留元素在佈局中的原始空間。

• 偏移

  ：使用上、右、下、左將其從正常位置移動。

絕對定位-自由精神

絕對定位

從文件流中完全刪除元素。然後，它將其相對於其最近的定位祖先進行定位，或者，如果沒有，則相對於初始包含區塊（通常是 元素）。

範例：

.absolute-element {
    position: absolute;
    top: 50px;
    left: 50px;
}

？很高興知道：

<script> // Detect dark theme var iframe = document.getElementById('tweet-1848997429565149264-1'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1848997429565149264&theme=dark" } </script>

• 從 Flow 移除：不影響其他元素的位置。
• 相對於定位祖先：如果沒有定位祖先，則它與初始包含區塊（通常是）相關。

固定位置 - 固定到螢幕

具有固定定位的元素相對於視口定位。當頁面滾動時它們不會移動，這使得它們非常適合導航列或彈出視窗等元素。

範例：

.static-element { position: static;}

？很高興知道：

• 不滾動：它們保持在原位，忽略滾動位置，這對於標題或通知來說非常有用。

黏性定位 - 適應使用者滾動

黏性定位 開始時像靜態一樣流動，但在滿足滾動閾值時可以變得固定。它非常適合您希望在滾動時保持在視圖中的標題。

範例：

.relative-element {
    position: relative;
    top: 10px; /* Moves the element down by 10 pixels */
    left: 20px; /* Moves the element to the right by 20 pixels */
}

？很高興知道：

• 開始靜態：直到達到閾值，然後變成固定。

常見誤解與提示

• 過度使用絕對：雖然功能強大，但過度使用絕對定位可能會導致佈局問題，尤其是在內容調整大小或元素意外重疊時。
• 有定位的 Z-Index：記住，定位元素可以使用 z-index 來控制堆疊順序，但 z-index 只適用於定位元素。
• 固定元素的效能：太多固定元素會影響效能，尤其是在固定元素可能無法正確重排的行動裝置上。
• 捲動與固定元素：謹慎使用可能涵蓋內容的固定元素。始終為用戶提供一種與這些元素背後的頁面互動的方式。

一個實際例子

讓我們建立一個佈局來示範每種定位類型。

？也可以在 CodePen 上找到範例。

.absolute-element {
    position: absolute;
    top: 50px;
    left: 50px;
}

.fixed-element {
    position: fixed;
    bottom: 0;
    right: 0;
}

此範例展示了每種定位方法的實際應用。當您捲動或調整視窗大小時，您會注意到元素的行為有何不同。

先進技術與注意事項

• Z-Index：雖然我們提到了它，但讓我們更深入地探討一下。 Z-index 僅適用於定位元素（相對、絕對、固定），並且堆疊上下文可能使其行為變得複雜。
• 組合位置：有時，一個元素可能需要相對和絕對定位來實現不同的目的

• 響應式設計：考慮不同位置在螢幕尺寸上的表現。已修復可能會覆蓋較小螢幕上的重要內容。

• 輔助功能：確保固定或黏性元素不會阻礙螢幕閱讀器或鍵盤導航。

使用實際應用進行練習

如果你想練習你的技能，你可以嘗試建立這些：

• 導覽元素：固定或黏性頁首或頁尾。
• 工具提示或模態：相對於父容器絕對定位。
• 視差效果：將固定位置的背景與滾動內容結合。

黏性標題及更多 ~ 範例

這是一個示範導覽元素（固定頁眉、黏性頁腳）、工具提示（絕對定位）和簡單視差效果的範例：

？找到完整程式碼並在Codepen上查看結果。

CSS 定位技術 ~ 範例

您可以在下面看到的範例示範了使用 HTML 和 CSS 的不同 CSS 定位技術。

？找到完整程式碼並在Codepen上查看結果。

.static-element { position: static;}

• 固定標題 :
  
  演示位置：固定，無論滾動如何，標題都會保持在視窗的頂部。

• 靜態元素 :
  
  顯示元素在正常文件流程中出現的預設位置。

• 相對與絕對元素 :
  
  相對盒是一個相對定位的容器，裡面有一個絕對定位的元素。此結構演示了絕對元素如何相對於其最近的定位祖先（在本例中為相對框）定位自身。

• 黏性元素 :
  
  使用position:sticky，它開始時是靜態的，但當達到一定的滾動閾值時會變得固定。
  

.relative-element {
    position: relative;
    top: 10px; /* Moves the element down by 10 pixels */
    left: 20px; /* Moves the element to the right by 20 pixels */
}

• Body：設定較高的高度以允許滾動，這是演示不同定位類型的效果所必需的。

• 固定標題：樣式始終保持在頂部，並帶有藍色背景以提高可見性。

• 容器：為其中的定位元素提供一些上下文。

• 靜態、相對、絕對、黏性元素：每個元素都有不同的樣式，以在視覺上區分其定位行為：

• 正常文件流中仍存在靜態。

• 相對從其正常位置移動，但仍佔據佈局中的原始空間。

• 絕對相對於相對框定位，這展示了絕對定位如何在已定位的父級中工作。

• 黏性開始於靜態位置，但一旦滾動超過其定義的閾值，就會「黏住」。

結論

給你了！您現在已經掌握了精確定位元素的知識，將您的網頁設計從基本變為令人驚嘆。請記住，熟能生巧，所以深入到您的專案中並開始嘗試 CSS 定位。快樂編碼！

---

？大家好，我是 Eleftheria，社群經理、 開發人員、公共演講者和內容創作者。

？如果您喜歡這篇文章，請考慮分享。

？ 所有連結 | X | 領英

以上是CSS 定位：元素放置的終極指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！