position五种属性

2021-08-02  本文已影响0人  WANG_M

1.position:static(默认值)

默认布局,元素出现在正常的文档流中(忽略top,bottom、left,right或者z-index声明)。

2.position:relative(相对定位)

(1)不影响元素本身特性(无论区块元素还是内联元素会保留其原本特性)
(2)不会使元素脱离文档流(元素原本位置会被保留)
(3)没有定位偏移量时对元素无影响(相对于自身原本位置进行偏移)
(4)提升层级(用z-index样式的值可以改变一个定位元素的层级关系,从而改变元素的覆盖关系,值越大越在上面。)
注:z-index只能在position属性值为relative或absolute或fixed的元素上有效。

3.position:absolute(绝对定位)

(1)使元素完全脱离文档流(在文档流中不再占位)
(2)使内联元素在设置宽高的时候支持宽高(改变内联元素的特性)
(3)使区块元素在未设置宽度时由内容撑开宽度(改变区块元素的特性)
(4)相对于最近一个有定位的父元素偏移(若其父元素没有定位则逐层上找,直到document——页面文档对象)
(5)相对定位一般配合绝对定位使用(将父元素设置相对定位,使其相对于父元素偏移)
(6)提升层级(同相对定位)

4.position:fixed(固定定位)

fixed是特殊版的absolute,相对于浏览器窗口进行定位。

5.position:inherit

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

6.position:sticky(粘性定位)

该定位基于用户滚动的位置,不脱离文档流。
它的行为像 position:relative;。
当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

上一篇 下一篇

猜你喜欢

热点阅读