position的区别

最新推荐文章于 2023-02-20 15:00:29 发布

gswwxyhk

最新推荐文章于 2023-02-20 15:00:29 发布

阅读量406

点赞数

本文链接：https://blog.csdn.net/gswwxyhk/article/details/89504181

版权

position

引自：https://www.jianshu.com/p/a116022c6c99

文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。

position属性值:static、relative、absolute、fixed
			  inherit、initial、sticky

relative定位，又称为相对定位，遵循正常的文档流，它没有脱离文档流，但是它的top/left/right/bottom属性是生效的。占据的文档空间不会随top / right / left / bottom 等属性的偏移而发生变动，也就是说它后面的元素是依据虚线位置( top / left / right / bottom等属性生效之前)进行的定位。

absolute定位，也称为绝对定位，使用absolut定位的元素脱离文档流后，就只能根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以position非static方式定位的。

fixed和absolute有很多共同点：
	1.会改变行内元素的呈现模式，使display之变更为block。
	2.会让元素脱离文档流，不占据空间。
	3.默认会覆盖到非定位元素上。
	fixed与absolute最大的区别在于：absolute的”根元素“是可以被设置的，而fixed则其”根元素“固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。

注意的是，relative和static方式在最外层时是以body标签为定位原点的，而absolute方式在无父级是position非static定位时是以html作为原点定位

如果使用absolute或fixed定位的话，必须指定 left、right、 top、 bottom属性中的至少一个，否则left/right/top/bottom属性会使用它们的默认值 auto，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递，简单讲就是都变成relative，会占用文档空间

使用static 定位或无position定位的元素z-index属性是无效的。