CSS 定位：元素放置的終極指南-css教學-PHP中文網

CSS Positioning: Your Ultimate Guide to Element Placement

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

無論您是經驗豐富的開發人員還是剛接觸 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;
}

登入後複製

？很高興知道：

從 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 */
}

登入後複製