CSS定位包含五种方式：static为默认定位，不支持偏移；relative相对原位置移动但占位不变；absolute脱离文档流，相对于最近已定位祖先元素定位；fixed相对于视口固定，不随滚动移动；sticky在滚动阈值前后切换相对与固定定位，常用于吸附效果。

如果您在设计网页时需要精确控制元素的位置，CSS 定位提供了多种方式来实现这一目标。通过设置不同的定位属性，可以让元素脱离正常的文档流或相对于特定参照物进行摆放。

本文运行环境：MacBook Pro，macOS Sonoma

一、static 定位

static 是元素的默认定位方式，元素会按照正常的文档流进行排列，不会受到 top、bottom、left、right 属性的影响。

1、所有块级元素和行内元素在未设置 position 属性时都处于 static 状态。

2、即使为元素设置了偏移值，也不会产生任何效果，因为 static 不支持定位偏移。

二、relative 定位

relative 定位使元素相对于其在正常文档流中的原始位置进行偏移，但元素原本占据的空间仍然保留。

1、设置 position: relative 后，可以使用 top、right、bottom、left 属性移动元素。

2、元素的偏移不会影响其他元素的布局，页面中其他内容仍按该元素未移动时布局。

三、absolute 定位

absolute 定位将元素从正常文档流中完全移除，并相对于最近的已定位祖先元素进行定位；若无则相对于初始包含块（通常是视口）。

1、元素不再占据原始文档流中的空间，可能导致其他元素“上移”填补空缺。

2、定位参考点是最近的 position 值为 relative、absolute 或 fixed 的祖先元素。

3、可通过 top、right、bottom、left 精确设定距离参考边界的偏移量。

四、fixed 定位

fixed 定位使元素相对于浏览器视口进行定位，无论页面如何滚动，元素始终停留在设定的位置。

1、常用于创建始终显示在屏幕某位置的导航栏或按钮。

2、元素脱离文档流，不随页面滚动而移动。

3、定位基准为视口，即使存在已定位的父元素也不受影响。

五、sticky 定位

sticky 定位是 relative 和 fixed 的结合体，元素在滚动到特定阈值前表现为相对定位，之后变为固定定位。

1、必须指定一个阈值（如 top: 0），否则 sticky 不会生效。

2、元素在未达到设定的临界点时正常流动，一旦满足条件则“粘”在视口中指定位置。

3、常见于表格标题或侧边栏的吸附效果。