首頁 > web前端 > css教學 > position的幾個屬性的作用分別是什麼

position的幾個屬性的作用分別是什麼

王林
發布: 2020-06-16 16:24:54
轉載
5138 人瀏覽過

position的幾個屬性的作用分別是什麼

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中文網其他相關文章!

相關標籤:
來源:juejin.im
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板