Position 位置

自定義您的元素相對於他們自己的位置，相對於父級或同級元素，或相對於窗口的位置。

1. Static positioning

2. Relative positioning

3. Absolute positioning

4. Fixed positioning

5. Sticky positioning

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

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

Static positioning

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

Relative positioning

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

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

1. 它引入了對該元素的z-index的使用。這對靜態元素是不起作用的。即使您不設置z-index值，這個元素仍然會出現在它重疊的任何其他靜態元素的上面。Z-index對任何沒有設置為靜態的元素都是可用的。

2. 它限制了絕對定位的子元素。任何作為相對元素的子元素，或除靜態以外的任何位置的元素，都可以在該元素中進行絕對定位。

Absolute positioning

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

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

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

Fixed positioning

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

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

Sticky positioning

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

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

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