CSS的`position`属性是用来控制元素在页面上的定位方式的，这个属性有五个值：`static`, `relative`, `absolute`, `fixed`, 和 `sticky`。
1. **Static（静态）**：这是每个元素的默认值，元素按照正常的文档流进行定位。
div {
position: static;
}
2. **Relative（相对）**：元素按照正常的文档流进行定位，然后相对于其原始位置进行偏移。
div {
position: relative;
left: 20px;
top: 30px;
}
3. **Absolute（绝对）**：元素脱离文档流，并相对于最近的已定位父元素（如果没有则相对于初始包含块）进行定位，元素的位置通过 `top`, `right`, `bottom`, 和 `left` 属性来确定。
div {
position: absolute;
top: 50px;
left: 60px;
}
4. **Fixed（固定）**：元素脱离文档流，并相对于浏览器窗口进行定位，即使页面滚动，它也始终位于同一的位置，元素的位置通过 `top`, `right`, `bottom`, 和 `left` 属性来确定。
div {
position: fixed;
top: 0;
right: 0;
}
5. **Sticky（粘性）**：这是相对定位和固定定位的混合类型，元素在滚动到一定位置之前为相对定位，之后为固定定位，这需要配合 `top`, `bottom`, `left`, 和 `right` 属性来使用。
div {
position: sticky;
top: 0;
}
在使用`position`属性时，要确保给元素设置了`z-index`属性，否则可能会影响元素的堆叠顺序，`z-index`的值越高，元素在堆叠顺序上就越高。
