| 属性 | 描述 |
|---|---|
| static | 默认值，没有定位，元素出现在正常的文档流中，会忽略 top, bottom, left, right 或者 z-index 声明，块级元素从上往下纵向排布，⾏级元素从左向右排列 |
| relative | 生成相对定位的元素，相对于其原来的位置进行定位。元素的位置通过 left、top、right、bottom 属性进行规定。元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响 |
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 left、top、right、bottom 属性进行规定。元素的定位时浏览器会递归查找该元素的所有父元素，如果找到一个设置了position:relative/absolute/fixed 的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位 |
| fixed | 生成固定定位的元素，指定元素相对于屏幕视⼝（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，⽐如回到顶部的按钮⼀般都是⽤此定位⽅式。元素的定位是相对于 window （或者 iframe）边界的，和其他元素没有关系。但是它具有破坏性，会导致其他元素位置的变化 |
| sticky | 粘性定位，基于用户的滚动位置来定位。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。也可监听scroll事件来实现 |
| inherit | 规定从父元素继承position属性的值 |
absolute 和 fixed 的共同点和不同点
共同点
- 改变行内元素的呈现方式，将display置为inline-block 子主题使元素脱离普通文档流，不再占据文档物理空间覆盖非定位文档元素 不同点
- absolute与fixed的根元素不同，absolute的根元素可以设置，fixed根元素是浏览器。在有滚动条的页面中，absolute会跟着父元素进行移动，fixed固定在页面的具体位置。
对 sticky 定位的理解
- sticky 英文字面意思是粘贴，所以可以把它称之为粘性定位。语法：position: sticky; 基于用户的滚动位置来定位。
- 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative；而当页面滚动超出目标区域时，它的表现就像 position:fixed；它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。否则其行为与相对定位相同。
