主题
position 定位
定位类型
static
- 默认值，元素按照正常的文档流进行排列。
- 不受 top、right、bottom、left 属性影响。
relative
- 相对定位元素是在文档中正常位置偏移给定的值。
- 不影响其他元素布局。
- 相对于自身位置偏移。
absolute
- 绝对定位元素脱离文档流。
- 具备行盒特性：宽度由内容决定。
- 具备块盒特性：支持所有样式，如：width、height。
- 绝对定位元素相对于最近的“非static”祖先元素定位，但当这样的祖先元素不存在时，则相对于可视区定位。
fixed
- 固定定位元素脱离文档流。
- 具备行盒特性：宽度由内容决定。
- 具备块盒特性：支持所有样式，如：width、height。
- 相对于可视区进行偏移，不受祖先元素影响。
注意
当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先。
sticky
- 粘性定位可以被认为是相对定位与固定定位的混合。元素在跨越特定阈值之前为相对定位，之后为固定定位
控制位置
top、right、bottom、left 来决定该元素的最终位置。
子元素相对于父元素的 内容（不包含边框） 进行偏移。
控制层级
通常后面的定位元素在前一个元素之上，可以通过 z-index 来把层级提高，默认为 0。
如果是嵌套比较：
- 比较元素先与其父元素比较层级
- 若父元素层级没有设置
z-index，再与该元素进行比较。
常见问题
绝对定位相对谁？
在 CSS 中，绝对定位（position: absolute）的定位参考点取决于最近的已定位祖先元素。具体规则如下：
- 如果元素的祖先中有设置了
position: relative、position: absolute、position: fixed或position: sticky的元素，则绝对定位是相对于最近一个已定位的祖先元素进行定位的。 - 如果祖先元素都没有设置定位属性（即都是默认的
position: static），则绝对定位会以初始包含块，也就是浏览器的视口（<html>元素）为参考点。
举例说明：
html
<div style="position: relative;">
<div style="position: absolute; top: 10px; left: 20px;">绝对定位元素</div>
</div>在上面的例子中，position: absolute 的元素会以外层 position: relative 的那个 div 为参考点进行定位。
如果没有任何祖先设置了定位属性，则会相对于页面（视口）定位。