htmlposition(html中position的屬性有哪些)

html中position的屬性有6種,分別是:1、“position: static”屬性指的是position的默認值;2、“position: relative”屬性指的是相對定位;3、“position: absolute”屬性指的是絕對定位;4、“position: fixed”指的是特殊版的絕對定位,相對于body定位的;5、“inherit”屬性,主要用來繼承父元素的position屬性;6、“sticky”屬性,是position的新增屬性,設置了sticky的元素后,在屏幕范圍時該元素的位置不受到定位影響。

html中css樣式position屬性介紹(新增sticky)

　　position的含義是指定位類型,取值類型可以有:static、relative、absolute、fixed、inherit和sticky,這里sticky是CSS3新發布的一個屬性。

1、position: static

　　static(沒有定位)是position的默認值,元素處于正常的文檔流中,會忽略left、top、right、bottom和z-index屬性。

2、position: relative

　　relative(相對定位)是指給元素設置相對于原本位置的定位,元素并不脫離文檔流,因此元素原本的位置會被保留,其他的元素位置不會受到影響。

3、position: absolute

　　absolute(絕對定位)是指給元素設置絕對的定位,相對定位的對象可以分為兩種情況:

　　1) 設置了absolute的元素如果存在有祖先元素設置了position屬性為relative或者absolute,則這時元素的定位對象為此已設置position屬性的祖先元素。

　　2) 如果并沒有設置了position屬性的祖先元素,則此時相對于body進行定位。

4、position: fixed

　　可以簡單說fixed是特殊版的absolute,fixed元素總是相對于body定位的。

5、inherit

　　繼承父元素的position屬性,但需要注意的是IE8以及往前的版本都不支持inherit屬性。

　　在講sticky之前,先上代碼:

　　html:

<h5>Relative</h5>
<pclass="p-containerp-container1">
<pclass="p1">static1</p>
<pclass="p2">relative1</p>
<pclass="p3">static1</p>
</p>
<h5>Absolute</h5>
<pclass="p-containerp-container2">
<pclass="p1">static2</p>
<pclass="p2">absolute2</p>
<pclass="p3">static2</p>
</p>
<h5>RelativecontainsAbsolute</h5>
<pclass="p-containerp-container3">
<pclass="p1">static3</p>
<pclass="p2">absolute3</p>
<pclass="p3">static3</p>
</p>
<h5>AbsolutecontainsAbsolute</h5>
<pclass="p-containerp-container4">
<pclass="p1">static3</p>
<pclass="p2">absolute3</p>
<pclass="p3">static3</p>
</p>

　　具體p的定位屬性可以看塊中的文字,顯示的效果如下,可以看到與上面講的一致:

6、sticky

　　position屬性中最有意思的就是sticky了,設置了sticky的元素,在屏幕范圍(viewport)時該元素的位置并不受到定位影響(設置是top、left等屬性無效),當該元素的位置將要移出偏移范圍時,定位又會變成fixed,根據設置的left、top等屬性成固定位置的效果。

　　可以知道sticky屬性有以下幾個特點:

該元素并不脫離文檔流,仍然保留元素原本在文檔流中的位置。

當元素在容器中被滾動超過指定的偏移值時,元素在容器內固定在指定位置。亦即如果你設置了top: 50px,那么在sticky元素到達距離相對定位的元素頂部50px的位置時固定,不再向上移動。

元素固定的相對偏移是相對于離它最近的具有滾動框的祖先元素,如果祖先元素都不可以滾動,那么是相對于viewport來計算元素的偏移量