CSS——定位布局

 静态定位     position: static;

是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中。

 相对定位     position: relative;

与静态定位相似

不脱离文档流，原先位置保留

如果不设置 top, bottom, left, right 属性， 依然在原位置

对于相对定位的元素我们可以通过属性 top, bottom, left, right 来改变元素最终的

位置。元素移动的时候是相对于 【当前元素所在的位置】 进行移动。

 固定定位         position: fixed;

固定定位元素 相对于浏览器视口区 进行定位， 脱离文档流 ，原先位置不保留，没有设置

定位属性的情况下， 默认是在原先位置固定定位。

不会随着浏览器的滚动而滚动

 绝对定位        position: absolute;

元素 脱离了文档流 ，即不在原来的位置上。在没有设置定位属性的情况下，默认在原先的

位置脱离文档流。不干扰其他元素在页面中的位置，显示在其他元素的上方。

没有定位祖先元素的，相对于视口区的左上角定位。

有定位祖先元素的，相对于定位祖先元素进行定位。

 粘性定位     position: sticky;

结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特

殊场景。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

设置了 position: sticky 的元素并 不脱离文档流 ，仍然保留元素原本在文档流中的位置。

当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果设

置了 top: 50px ，那么在 sticky 元素到达距离相对定位的元素顶部 50px 的位置时固定，不再

向上移动（此时相当于 fixed 定位）。

元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以

滚动，那么是相对于 viewport( 视口区 ) 来计算元素的偏移量。