position的absolute与fixed共同点与不同点

Posted 2020-12-21 xuzhihang

position的absolute与fixed共同点与不同点

position属性是对于元素位置设置的属性，一般来说fixed是相对于window窗口的，不会随着页面的滚动而位置发生变化

absolute是相对于页面中的元素位置设置的，所以位置会随着页面的滚动而发生变化，不会固定不变。如果页面没有滚动条的时候，两者的效果是一样的。

所以区别很简单：

1、没有滚动条的情况下没有差异

2、在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动。

可以这么理解，fixed：固定在当前window不动， absolute：会随参照对象元素的高度和宽度变化而变化

一般fixed用在遮盖层和固定在页面某个位置，如固定在顶端的菜单栏，又如弹出提示框居中显示

A：共同点：

1.改变行内元素的呈现方式，display被置为block；

2.让元素脱离普通流，不占据空间；

3.默认会覆盖到非定位元素上

B不同点：

absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。

当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。