position 的常見四個屬性值: relative,absolute,fixed,static。一般都要配合"left"、"top"、"right" 以及 "bottom" 屬性使用。
下面我們來詳細說明:
static:預設位置
在一般情況下,我們不需要特別的去聲明它,但有時候遇到繼承的情況,我們不願意見到元素所繼承的屬性影響本身,從而可以用Position:static取消繼承,也就是還原元素定位的預設值。設定為 static 的元素,它總是會處於頁面流給予的位置(static 元素會忽略任何 top、 bottom、left 或 right 宣告)。不常用。
relative:相對定位
相對定位是相對於元素預設的位置的定位,它偏移的top,right,bottom,left 的值都以它原來的位置為基準偏移,而不管其他元素會怎麼樣。注意 relative 移動後的元素在原來的位置仍佔據空間。
absolute:絕對定位
設定為absolute 的元素,如果它的父容器設定了position 屬性,並且position 的屬性值為absolute 或relative,那麼就會依據父容器進行偏移。如果其父容器沒有設定 position 屬性,那麼偏移是以 body 為依據。注意設定 absolute 屬性的元素在標準流中不佔位置。
fixed:固定定位
位置被設定為 fixed 的元素,可定位於相對於瀏覽器視窗的指定座標。不論窗口滾動與否,元素都會留在那個位置。它總是以 body 為依據的。注意設定 fixed 屬性的元素在標準流中不佔位置。
推薦教學:css快速入門
#以上是position的幾個屬性的作用分別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!