Position 位置
自定義您的元素相對於他們自己的位置,相對於父級或同級元素,或相對於窗口的位置。
Last updated
自定義您的元素相對於他們自己的位置,相對於父級或同級元素,或相對於窗口的位置。
Last updated
Static positioning
Relative positioning
Absolute positioning
Fixed positioning
Sticky positioning
位置屬性決定了元素在頁面上的位置。
設置位置後,您可以對頂部、底部、左側和右側的屬性進行調整。
每個元素在默認情況下都有一個靜態的位置,該元素會堅持在文檔流中,且按照它們的堆疊順序出現。 如果沒有添加樣式,它們不會重疊,不同的元素也不會有不同的默認值。 將元素設置為靜態的唯一原因是為了移除應用於它的位置。
Relative元素是相對於其正常位置的。沒有添加其他定位屬性(上、左、下或右)的相對設置,將不會受到影響。 設置一個相對元素的頂部、右側、底部和左側屬性將使它遠離正常位置。其他內容不會調整以適應該元素留下的任何間隙。
一個具有相對位置的元素可以與其他元素重疊,而不影響它們的位置或中斷正常的文檔流程。
它引入了對該元素的z-index的使用。這對靜態元素是不起作用的。即使您不設置z-index值,這個元素仍然會出現在它重疊的任何其他靜態元素的上面。Z-index對任何沒有設置為靜態的元素都是可用的。
它限制了絕對定位的子元素。任何作為相對元素的子元素,或除靜態以外的任何位置的元素,都可以在該元素中進行絕對定位。
位置不受其他元素的影響,也不影響其他元素的位置。
默認情況下,該元素的位置是相對於主體元素的,但如果父元素被設置為靜態以外的任何元素,您可以將任何Absolute元素定位在該元素內。
使用定位屬性top、left、bottom和right來設置位置--這些值將是相對於設置為靜態以外的下一個父元素的。
固定元素的位置是相對於視口或瀏覽器窗口的。
當您向下滾動頁面時,固定元素會保持固定的位置。這種位置設置通常用於固定導航。
元素將根據瀏覽者的滾動位置,在相對和固定的位置之間交替進行。
Sticky positioning元素是相對於文檔流的,直到達到一個定義的滾動位置。在這一點上,它將切換到其父元素的固定元素的行為。一旦元素到達其父元素的底部,它將停止滾動。
您必須為頂部、底部、左側或右側指定至少一個位置值,Sticky positioning才能發揮作用。如果任何父元素有設置高度或溢出設置為隱藏、滾動或自動,則Sticky positioning可能無法正常工作。