css position五種屬性及特點

2021-08-22 11:35:48 字數 869 閱讀 6788

w3c中獲取定義:

static : 預設值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 宣告)。

inherit:規定應該從父元素繼承 position 屬性的值。

fixed :生成絕對定位的元素,相對於瀏覽器視窗進行定位。(元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。)

absolute : 生成絕對定位的元素,相對於 static 定位以外的第乙個父元素進行定位。(元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。)

relative : 生成相對定位的元素,相對於其正常位置進行定位。因此,"(left:20" 會向元素的 left 位置新增 20 畫素。)

總的來說 :

static,就是正常的文件流順序,預設的,相當於沒有定位!

inherit, 就是從父元素繼承 position 屬性的值,

fixed, 就是相對於瀏覽器視窗,就是你滾動條怎麼滾動,他還是那個位置,就想是「粘」 在視窗上了!

absolute,是脫離文件流的原來的位置是不繼續佔據了,如果他的父級元素中有已經定位了的不管是absolute的還是relative,它都會相對於他的父級元素來定位,如果他的父級元素中沒有定位了的那麼它就是相對於body來定位的。也就是說absolute的絕對是有參照物的!

relative,是不會脫離文件流的原來的位置也就繼續佔據了,它是只相對於自身原來的位置來定位的!

css position五種屬性及特點

w3c中獲取定義 static 預設值。沒有定位,元素出現在正常的流中 忽略 top,bottom,left,right 或者 z index 宣告 inherit 規定應該從父元素繼承 position 屬性的值。fixed 生成絕對定位的元素,相對於瀏覽器視窗進行定位。元素的位置通過 left ...

CSS position屬性用法

絕對定位 position absolute 有如下兩種情況 1,沒有設定 top right bottom left 的情況,預設依據父級的 內容區域原始點 為原始點 2,有設定 top right bottom left 的情況,這裡又分了兩種情況如下 1 父級沒 position 屬性,瀏覽器...

css position 屬性詳解

相信很多同學在編寫 設計 的時候多多少少用過css裡的position這個屬性,但是很多時候網頁顯示出來的和自己想象的不太一樣,這篇部落格來教你怎麼使用position。position屬性共有5個不同的值,下面是w3school給出的 解釋 其中,如果不對dom中的元素設定position屬性,那...