# Position 位置

1. Static positioning
2. Relative positioning
3. Absolute positioning
4. Fixed positioning
5. Sticky positioning

**位置屬性決定了元素在頁面上的位置。**

**設置位置後，您可以對頂部、底部、左側和右側的屬性進行調整。**

### Static positioning

每個元素在默認情況下都有一個靜態的位置，該元素會堅持在文檔流中，且按照它們的堆疊順序出現。\
如果沒有添加樣式，它們不會重疊，不同的元素也不會有不同的默認值。\
將元素設置為靜態的唯一原因是為了移除應用於它的位置。

![](/files/7qj1dAStnH5jR90z51bU)

###

### Relative positioning

Relative元素是相對於其正常位置的。沒有添加其他定位屬性（上、左、下或右）的相對設置，將不會受到影響。\
設置一個相對元素的頂部、右側、底部和左側屬性將使它遠離正常位置。其他內容不會調整以適應該元素留下的任何間隙。

![](/files/a5Pm5DcBQMbd6nhqQ5S7)

一個具有相對位置的元素可以與其他元素重疊，而不影響它們的位置或中斷正常的文檔流程。

1. 它引入了對該元素的z-index的使用。這對靜態元素是不起作用的。即使您不設置z-index值，這個元素仍然會出現在它重疊的任何其他靜態元素的上面。Z-index對任何沒有設置為靜態的元素都是可用的。
2. 它限制了絕對定位的子元素。任何作為相對元素的子元素，或除靜態以外的任何位置的元素，都可以在該元素中進行絕對定位。

### Absolute positioning

位置不受其他元素的影響，也不影響其他元素的位置。

![](/files/FRcK5CQd7h11vEDbdp6a)

默認情況下，該元素的位置是相對於主體元素的，但如果父元素被設置為靜態以外的任何元素，您可以將任何Absolute元素定位在該元素內。

使用定位屬性top、left、bottom和right來設置位置--這些值將是相對於設置為靜態以外的下一個父元素的。

### Fixed positioning

固定元素的位置是相對於視口或瀏覽器窗口的。

![](/files/clzAqfExQGxHoEzca4jJ)

當您向下滾動頁面時，固定元素會保持固定的位置。這種位置設置通常用於固定導航。

### Sticky positioning

元素將根據瀏覽者的滾動位置，在相對和固定的位置之間交替進行。

![](/files/LUZ50UbiDgz13MxnbG0Z)

Sticky positioning元素是相對於文檔流的，直到達到一個定義的滾動位置。在這一點上，它將切換到其父元素的固定元素的行為。一旦元素到達其父元素的底部，它將停止滾動。

您必須為頂部、底部、左側或右側指定至少一個位置值，Sticky positioning才能發揮作用。如果任何父元素有設置高度或溢出設置為隱藏、滾動或自動，則Sticky positioning可能無法正常工作。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tenten.co/docs-webflow/webflow-101/03-designer-jie-mian-zong-lan/position-wei-zhi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.