absolute 与 fixed 共同点与不同点和对 sticky 定位的理解

absolute 与 fixed 共同点与不同点

(资料图)

共同点：

改变行内元素的呈现方式，将 display 置为 inline-block

使元素脱离普通文档流，不再占据文档物理空间

覆盖非定位文档元素

不同点：

abuselute 与 fixed 的根元素不同，abuselute 的根元素可以设置，fixed 根元素是浏览器。

在有滚动条的页面中，absolute 会跟着父元素进行移动，fixed 固定在页面的具体位置。

对 sticky 定位的理解

sticky 英文字面意思是粘贴，所以可以把它称之为粘性定位。语法：position: sticky;基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative与 position:fixed定位之间切换。它的行为就像 position:relative;而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。