CSS定位屬性

探索以下主題：

1. 場所規定
2. 對應定位
3. 精確定位
4. 定位不變
5. 附定位
6. 控制位置和屬性
7. 浮動設定
8. 澄清設定

location 屬性決定元素在頁面上的位置。一旦確定了元素的位置，您就可以調整頂部、底部、左側和右側屬性。

場所規定

預設情況下，每個元素都有固定的位置，因此元素將保留在 document 流上。具有固定定位的元素以其堆疊順序顯示。如果沒有添加樣式，它們就不會重疊，並且各種元素不會具有不同的預設原則。將元素定義為固定的唯一動機是消除所應用的定位。

對應定位

配置為對應的元素相對於其典型位置放置。不包含其他放置屬性（頂部、左側、底部或右側）的相應設定不會變更。這是因為它與自身的關係恰恰就好像你保持它是固定的一樣。定義對應元素的 top、right、bottom 和 left 屬性會將其從普通位置移動。不同的內容不會適應元素留下的任何間隙。

具有相應定位的元素可以與其他元素重疊，而不會影響它們的位置或阻礙標準 document 流程。

當您在元素上使用相應的位置時，還會發生其他一些事情：

1. 它啟動該元素上 z 軸的使用。這不適用於固定元素。即使您沒有建立 z 軸值，該元素仍然會出現在它介入的任何其他固定元素之上。任何未指定為固定的元素都可以存取 z 軸。 
2. 它限制了完全定位的子元素。任何充當相應元素的子元素的元素，或任何不同於固定的位置，都可以精確地定位在該元素內。 

擴展您對應用 z 軸值的理解。

精確定位

要取代標準 document 流程中的元素，精確放置是一個絕佳的選擇。確切元素的位置不受其他元素的影響，也不會影響其他元素的位置。 

預設情況下，元素的位置與 body 元素相關，但如果該父元素被指定為除固定之外的任何元素，則可以在元素內放置任何精確的元素。

利用放置屬性 top、left、bottom 和 right 來確定位置 - 這些值將相對於最近的父元素，其配置不同於固定。

定位不變

不變的元素是相對於視窗或瀏覽器視窗放置的。

在頁面捲動期間，不變的元素保持固定在其位置。這種定位選擇經常用於穩定導航。

附定位

附加元素將根據檢視者的捲動位置在相應和不變的位置之間互換。

附加元素與 document 流相關，直到達到定義的捲動等級。此時，它會切換到其直接父級中不變元素的行為。一旦附加元素到達其父元素的底部，它將停止滾動。

您需要為頂部、底部、左側或右側至少指定一個放置值，以便附加定位發揮作用。如果任何父元素具有已建立的高度或指定為隱藏、捲動或自動的溢出，則附加的位置可能無法準確運作。

有些瀏覽器不支援附加定位。 檢查哪些瀏覽器認可附加位置.

放置控制項和值

對於對應的、精確的、不變的和附加的放置屬性，您可以在「樣式」面板中使用下列控制項：

• 放置控制
• 相關性指標
• Z 軸值字段

放置控制

對於位置精確且不變的元素，您將遇到預設，使您能夠相對於相關性指示器中指示的元素來定位元素。

您可以選擇任何後續預設位置：

• 左上：指定值如下：上方：0px 和左側：0px
• 右上：表示取值如下：上：0px，右：0px
• 左下：將值設為底部：0px 和左側：0px
• 右下：將值配置為底部：0px 和右側：0px
• 左：分配諸如頂部：0px、左側：0px 和底部：0px 之類的值
• 右：分配諸如頂部：0px、右：0px 和底部：0px 之類的值
• 頂部：設定諸如頂部：0px、左側：0px 和右側：0px 之類的值
• 底部：將數值定義為底部：0px，左側：0px，右側：0px
• Full：指定諸如 top: 0px、bottom: 0px、left: 0px 和 right: 0px 之類的值（覆寫整個相對父級或主體）

手動控制可讓您變更預設或切換到每一側（例如頂部、底部、左側和右側）的自動值。您可以透過操縱控製或點擊它來選擇預設值或輸入自訂值來調整每側的值。

• Top：增加它會將元素從頂部向下推
• 左：增加它將元素從左向右移動
• 右：增加它將元素從右向左移動
• Bottom：增加它會將元素從底部向上移動

對其中任何一個使用負值都可能將其向相反方向移動，並可能將其移動到父元素的邊框之外。

定位指示器

定位指示器顯示您選擇的項目相對於哪個元素定位。

請記住，一個元素設定為 相對的 定位是相對於自身定位的。

設定為絕對的元素相對於父元素定位。預設情況下，這可能是 body 元素。如果您想在特定父級中絕對定位某個元素，請將前一個元素的位置修改為靜態以外的任何位置。

A 固定的 元素相對於頁面主體定位，即使捲動頁面也保持固定

黏性元素相對於其直接父元素定位。有時，這將是頁面主體。

圖層索引

圖層索引表示元素在延伸至電腦螢幕和延伸出電腦螢幕的理論 z 軸上的位置。最初，元素擁有自動圖層索引，頁面底部的元素將堆疊在其上方的元素上方，而右側的元素將堆疊在左側的元素上方。靜態元素始終堆疊在具有相對、絕對、固定或黏性集位置的定位元素下方。

定位元素可能會與自然 document 流中的其他元素重疊，因此您可以調整任何定位元素的圖層索引值來修改其預設堆疊順序。較高的值疊加在較低的值上。圖層索引值的範圍為 0 到 2147483647。

嵌套元素的層索引

當圖層索引設定為auto時，元素的排列順序與其父元素的排列順序對齊。這些元素可以相對於父元素堆疊，但相對於其他元素將保留在父元素的 z 軸內。例如，如果元素 A 擁有比元素 B 更高的層索引，則無論元素 B 的層索引值有多高，元素 B 的子元素都永遠無法超過元素 A。

浮動配置

若要允許文字環繞元素，請將元素向左或向右浮動。若要實現此目的，請在「樣式」面板中啟動左浮動或右浮動屬性。

您可以將元素向左或向右浮動，或不浮動，這會保持其在頁面流中的預設位置。

浮動多個元素會將它們並排排列。此版面配置方法用於各種本機 Webflow 元素，例如集合清單和導覽連結。或者，您可以完成這些佈局任務 附彈性盒.

浮動 無

None 用作大多數元素的標準設置，並將元素定位在常規 document 流中。如果元素繼承了浮動設定（例如從較大的斷點繼承），則可以透過將浮動設為無來恢復其在頁面上的自然位置。

向左飄浮

將元素向左浮動會將其在父元素內向左對齊。這也會將任何元素向右或向下對齊，直接與該元素相鄰，除非套用了明確的設定。

右浮動

將元素向右浮動會將其與父元素內的右側對齊。除非設定了明確的屬性，否則浮動元素正下方的任何長段落或富文本都會環繞該元素。

清晰的配置

在元素上啟用清除可確保它不會環繞浮動元素。此設定可以在浮動元素下方堆疊的任何元素上實現，但不能應用於浮動元素本身。

設定了clear屬性的元素不會按照浮動所需的方式在浮動旁邊向上移動，而是會向下重新定位到浮動上方

清除 無

Clear None 代表大多數元素的預設設定。設定為「清除無」的元素將在 document 流中緊鄰或環繞其上方的任何浮動元素。

如果元素繼承了清除設定（例如從較大的斷點繼承的清除設定），您可以透過將清除設定為無來清除任何流行的清除設定。

清除左側

Clear Left 可防止元素環繞左浮動元素。

清除右

Clear Right 禁止元素環繞右浮動元素。

清除兩者

清除兩者可防止元素環繞任何浮動元素，無論它是向左浮動還是向右浮動。