什么是 position？
position 是 CSS 中用于控制元素定位方式的重要属性。它决定了元素如何在文档流中布局，以及是否脱离正常流。
常用取值包括：static（默认）、relative、absolute、fixed 和 sticky。
1. static（静态定位）
这是所有元素的默认定位方式。元素按照正常文档流排列，top、left 等偏移属性无效。
static
div {
position: static;
}2. relative（相对定位）
元素仍处于正常文档流中，但可以通过 top、right、bottom、left 相对于自身原始位置进行偏移。
relative
div {
position: relative;
top: 20px;
left: 30px;
}3. absolute（绝对定位）
元素脱离文档流，相对于最近的已定位（非 static）祖先元素进行定位。若无，则相对于初始包含块（通常是视口）。
absolute
.container {
position: relative; /* 父容器需定位 */
}
.box {
position: absolute;
top: 20px;
left: 20px;
}4. fixed（固定定位）
元素脱离文档流，相对于浏览器视口定位，即使页面滚动也不会移动。常用于导航栏、返回顶部按钮等。
下方右下角有一个 fixed 元素（滚动页面可见）：
滚动页面试试 👇
fixed
div {
position: fixed;
bottom: 20px;
right: 20px;
}5. sticky（粘性定位）
结合了 relative 和 fixed 的特点：在滚动到特定阈值前表现为 relative，之后变为 fixed。常用于表头、侧边栏吸附效果。
滚动此区域查看 sticky 效果：
sticky
div {
position: sticky;
top: 10px;
}总结
static：默认，不响应偏移。relative：保留原位置，可微调。absolute：脱离流，相对于定位祖先。fixed：脱离流，相对于视口固定。sticky：滚动时“粘住”视口某位置。
合理使用 position 能实现复杂布局，但注意避免过度使用导致维护困难。