大家好，歡迎回到我的博客！ ？

無論您是經(jīng)驗豐富的開發(fā)人員還是剛剛接觸 CSS，本文都會為您提供一些額外的知識和示例！

CSS 定位簡介

CSS 定位決定了元素將出現(xiàn)在文檔流中的位置。默認情況下，所有元素都遵循自然流從左到右、從上到下，這稱為靜態(tài)定位

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

靜態(tài)定位 - 默認行為

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

示例：

.static-element { position: static;}

正常流程：元素按照從左到右、從上到下的順序依次布局，除非通過浮動、彈性盒或網(wǎng)格進行修改。

？很高興知道

：

• 塊元素

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

• 內(nèi)聯(lián)元素

  ：它們水平流動，僅占用其內(nèi)容所需的寬度。

相對定位 - 視角的轉變

相對定位

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

示例：

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

？很高興知道

：相對定位很簡單，但經(jīng)常被誤解：

• 保留空間

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

• 偏移

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

絕對定位-自由精神

絕對定位

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

示例：

.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;}

？很高興知道：

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

粘性定位 - 適應用戶滾動

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

示例：

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

？很高興知道：

• 開始靜態(tài)：直到達到閾值，然后變得固定。

常見誤解和提示

• 過度使用絕對：雖然功能強大，但過度使用絕對定位可能會導致布局問題，尤其是在內(nèi)容調整大小或元素意外重疊時。
• 帶有定位的 Z-Index：記住，定位元素可以使用 z-index 來控制堆疊順序，但 z-index 只適用于定位元素。
• 固定元素的性能：太多固定元素會影響性能，尤其是在固定元素可能無法正確重排的移動設備上。
• 滾動和固定元素：謹慎使用可能覆蓋內(nèi)容的固定元素。始終為用戶提供一種與這些元素背后的頁面交互的方式。

一個實際例子

讓我們創(chuàng)建一個布局來演示每種定位類型。

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

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

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

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

先進技術和注意事項

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

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

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

使用實際應用進行練習

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

• 導航元素：固定或粘性頁眉或頁腳。
• 工具提示或模態(tài)：相對于父容器絕對定位。
• 視差效果：將固定位置的背景與滾動內(nèi)容相結合。

粘性標題及更多 ~ 示例

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

？找到完整代碼并在Codepen上查看結果。

CSS 定位技術 ~ 示例

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

？找到完整代碼并在Codepen上查看結果。

.static-element { position: static;}

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

• 靜態(tài)元素 :
  
  顯示元素在正常文檔流中出現(xiàn)的默認位置。

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

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

.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：設置較高的高度以允許滾動，這是演示不同定位類型的效果所必需的。

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

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

• 靜態(tài)、相對、絕對、粘性元素：每個元素都有不同的樣式，以在視覺上區(qū)分其定位行為：

• 正常文檔流中仍存在靜態(tài)。

• 相對從其正常位置移動，但仍占據(jù)布局中的原始空間。

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

• 粘性開始于靜態(tài)位置，但一旦滾動超過其定義的閾值，就會“粘住”。

結論

給你了！您現(xiàn)在已經(jīng)掌握了精確定位元素的知識，將您的網(wǎng)頁設計從基本變?yōu)榱钊梭@嘆。請記住，熟能生巧，所以深入到您的項目中并開始嘗試 CSS 定位。快樂編碼！

---

？大家好，我是 Eleftheria，社區(qū)經(jīng)理、 開發(fā)人員、公共演講者和內(nèi)容創(chuàng)建者。

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

？ 所有鏈接 | X | 領英

以上是CSS 定位：元素放置的終極指南的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！