CSS Reference 有非常好的 带图示例。MDN 提供了各种值的 具体含义。下面是一些重点总结。

每个元素都有默认的 position 属性，值为 static，这使它 不 positioned。设置任一非 static 值使其 positioned。仅当元素 positioned 时，这些属性会对它起作用：

• top
• bottom
• left
• right
• z-index

position 为 static 或 relative 时，元素在页面上自然排列。

当元素的 position 为 relative 时，

• 该元素成为 positioned，可以作为子元素使用 absolute 时的 closest positioned ancestor。这种是最常见的情况
• 如果同时设置了 top, bottom 等定位属性，该元素在页面中占用的空间不会变，但是会有所偏移

position 为 fixed 时，经常用于 navbar 或者 footer 场景中。

未研究 sticky 的使用场景，似乎比较少见。