css之position五種屬性及特點

2021-09-11 23:33:42 字數 792 閱讀 7207

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屬性)

把元素的position屬性設定為relative absolute或fixed後,繼而可以使用trbl屬性,相對於另乙個元素移動該元素的位置。這裡的 另乙個元素 就是該元素的定位上下文。絕對定位元素的預設上下文是body。然而絕對定位元素的任何祖先元素都可以成為它的定位上下文,只要把相應的祖先元素...

CSS 屬性之 position講解

postion 屬性定義了乙個元素在頁面布局中的位置以及對周圍元素的影響。該屬性共有5個值 position static position inherit position relative position absolute position fixed 依次講解這5個值的應用。position...

CSS標籤屬性之position

position屬性規定元素的定位型別。所以的主流瀏覽器都能夠很好的支援position屬性。任何版本的ie瀏覽器 internet explorer 包括ie8都 不支援position屬性值 inherit 一下五個值是position屬性常用的 absolute 生成絕對定位的元素,相對於st...