# Position 位置 1. Static positioning 2. Relative positioning 3. Absolute positioning 4. Fixed positioning 5. Sticky positioning **位置屬性決定了元素在頁面上的位置。** **設置位置後，您可以對頂部、底部、左側和右側的屬性進行調整。** ### Static positioning 每個元素在默認情況下都有一個靜態的位置，該元素會堅持在文檔流中，且按照它們的堆疊順序出現。\ 如果沒有添加樣式，它們不會重疊，不同的元素也不會有不同的默認值。\ 將元素設置為靜態的唯一原因是為了移除應用於它的位置。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FQI5Z5wB3s59DNjDD36mq%2Fimage.png?alt=media\&token=70a7733c-6f0b-4b66-a255-57df5695b81c) ### ### Relative positioning Relative元素是相對於其正常位置的。沒有添加其他定位屬性（上、左、下或右）的相對設置，將不會受到影響。\ 設置一個相對元素的頂部、右側、底部和左側屬性將使它遠離正常位置。其他內容不會調整以適應該元素留下的任何間隙。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FVxTeR4ART9xSv0EDN7v1%2Fimage.png?alt=media\&token=561185bb-7102-4c65-995e-d8a0ddae67ec) 一個具有相對位置的元素可以與其他元素重疊，而不影響它們的位置或中斷正常的文檔流程。 1. 它引入了對該元素的z-index的使用。這對靜態元素是不起作用的。即使您不設置z-index值，這個元素仍然會出現在它重疊的任何其他靜態元素的上面。Z-index對任何沒有設置為靜態的元素都是可用的。 2. 它限制了絕對定位的子元素。任何作為相對元素的子元素，或除靜態以外的任何位置的元素，都可以在該元素中進行絕對定位。 ### Absolute positioning 位置不受其他元素的影響，也不影響其他元素的位置。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FXEutrCSR07Oh0q8Qw0km%2Fimage.png?alt=media\&token=157ecdee-bbe9-419b-b7fb-8a457e6c564c) 默認情況下，該元素的位置是相對於主體元素的，但如果父元素被設置為靜態以外的任何元素，您可以將任何Absolute元素定位在該元素內。 使用定位屬性top、left、bottom和right來設置位置--這些值將是相對於設置為靜態以外的下一個父元素的。 ### Fixed positioning 固定元素的位置是相對於視口或瀏覽器窗口的。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2Fx0ahVlo8V4nXLx8PoajT%2Fimage.png?alt=media\&token=8490abee-2c71-4231-b1c9-22b097574959) 當您向下滾動頁面時，固定元素會保持固定的位置。這種位置設置通常用於固定導航。 ### Sticky positioning 元素將根據瀏覽者的滾動位置，在相對和固定的位置之間交替進行。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F1KyrTo2XuyEN0ilyaAPx%2Fimage.png?alt=media\&token=9b9e9042-74a8-4c12-a4aa-2ebc9d365e7f) Sticky positioning元素是相對於文檔流的，直到達到一個定義的滾動位置。在這一點上，它將切換到其父元素的固定元素的行為。一旦元素到達其父元素的底部，它將停止滾動。 您必須為頂部、底部、左側或右側指定至少一個位置值，Sticky positioning才能發揮作用。如果任何父元素有設置高度或溢出設置為隱藏、滾動或自動，則Sticky positioning可能無法正常工作。