具有固定定位的元素相對(duì)於視口定位。當(dāng)頁面滾動(dòng)時(shí)它們不會(huì)移動(dòng)，這使得它們非常適合導(dǎo)航列或彈出視窗等元素。

範(fàn)例：

.static-element { position: static;}

？很高興知道：

• 不滾動(dòng)：它們保持在原位，忽略滾動(dòng)位置，這對(duì)於標(biāo)題或通知來說非常有用。

黏性定位 - 適應(yīng)使用者滾動(dòng)

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

範(fàn)例：

.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)：直到達(dá)到閾值，然後變成固定。

常見誤解與提示

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

一個(gè)實(shí)際例子

讓我們建立一個(gè)佈局來示範(fàn)每種定位類型。

？也可以在 CodePen 上找到範(fàn)例。

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

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

此範(fàn)例展示了每種定位方法的實(shí)際應(yīng)用。當(dāng)您捲動(dòng)或調(diào)整視窗大小時(shí)，您會(huì)注意到元素的行為有何不同。

先進(jìn)技術(shù)與注意事項(xiàng)

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

• 響應(yīng)式設(shè)計(jì)：考慮不同位置在螢?zāi)怀叽缟系谋憩F(xiàn)。已修復(fù)可能會(huì)覆蓋較小螢?zāi)簧系闹匾獌?nèi)容。

• 輔助功能：確保固定或黏性元素不會(huì)阻礙螢?zāi)婚喿x器或鍵盤導(dǎo)航。

使用實(shí)際應(yīng)用進(jìn)行練習(xí)

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

• 導(dǎo)覽元素：固定或黏性頁首或頁尾。
• 工具提示或模態(tài)：相對(duì)於父容器絕對(duì)定位。
• 視差效果：將固定位置的背景與滾動(dòng)內(nèi)容結(jié)合。

黏性標(biāo)題及更多 ~ 範(fàn)例

這是一個(gè)示範(fàn)導(dǎo)覽元素（固定頁眉、黏性頁腳）、工具提示（絕對(duì)定位）和簡單視差效果的範(fàn)例：

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

CSS 定位技術(shù) ~ 範(fàn)例

您可以在下面看到的範(fàn)例示範(fàn)了使用 HTML 和 CSS 的不同 CSS 定位技術(shù)。

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

.static-element { position: static;}

• 固定標(biāo)題 :
  
  演示位置：固定，無論滾動(dòng)如何，標(biāo)題都會(huì)保持在視窗的頂部。

• 靜態(tài)元素 :
  
  顯示元素在正常文件流程中出現(xiàn)的預(yù)設(shè)位置。

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

• 黏性元素 :
  
  使用position:sticky，它開始時(shí)是靜態(tài)的，但當(dāng)達(dá)到一定的滾動(dòng)閾值時(shí)會(huì)變得固定。
  

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

• 固定標(biāo)題：樣式始終保持在頂部，並帶有藍(lán)色背景以提高可見性。

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

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

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

• 相對(duì)從其正常位置移動(dòng)，但仍佔(zhàn)據(jù)佈局中的原始空間。

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

• 黏性開始於靜態(tài)位置，但一旦滾動(dòng)超過其定義的閾值，就會(huì)「黏住」。

結(jié)論

給你了！您現(xiàn)在已經(jīng)掌握了精確定位元素的知識(shí)，將您的網(wǎng)頁設(shè)計(jì)從基本變?yōu)榱钊梭@嘆。請(qǐng)記住，熟能生巧，所以深入到您的專案中並開始嘗試 CSS 定位?？鞓肪幋a！

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

？如果您喜歡這篇文章，請(qǐng)考慮分享。

？ 所有連結(jié) | X | 領(lǐng)英

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