元素的“初始位置”由position属性和定位上下文决定：static为文档流中的自然位置；relative相对于自身原始位置偏移；absolute相对于最近非static祖先元素；fixed相对于视口；sticky则在父容器内相对定位，滚动时触发固定效果。
在CSS中，元素的“初始位置”并不是通过一个叫 default 的属性来设置的，而是由其 定位上下文 和 position 属性值 共同决定的。理解不同 position 值的默认行为和偏移机制，是掌握布局的关键。
1. 默认定位：static（文档流中的自然位置）
所有HTML元素的 position 默认值为 static。这类元素按照文档流顺序从上到下、从左到右排列，不受 top、right、bottom、left 等偏移属性影响。
- 元素的“初始位置”就是它在HTML结构中自然出现的位置。
- 无法通过设置偏移量来移动 static 元素。
- 这是最常见、最基础的定位方式，适用于大多数常规布局。
2. 相对定位：relative（相对于自身原始位置偏移）
当设置 position: relative; 后，元素仍保留在文档流中，其“初始位置”就是原本 static 时的位置。此时可以使用偏移属性进行调整。
-
top: 10px;表示从原始位置向下移动10px。 -
left: 20px;表示从原始位置向右移动20px。 - 偏移后，原位置仍被占据，不会影响其他元素布局。
div {
position: relative;
top: 10px;
left: 15px;
}
这个 div 会从它原本的位置向右下方偏移，但原来的空间仍然保留。
立即学习“前端免费学习笔记（深入）”；
3. 绝对定位：absolute（相对于最近的定位祖先元素）
设置 position: absolute; 的元素脱离文档流，其“初始位置”参考点变为最近的非 static 定位的祖先元素。如果没有这样的祖先，则相对整个文档（即初始包含块）定位。
- 若无任何偏移设置（
top、left等为 auto），元素将出现在它在文档流中原本的大致区域，但已脱离流，不占空间。 - 一旦设置
top: 0; left: 0;，元素会贴靠其定位容器的左上角。 - 常用于模态框、下拉菜单、图标覆盖等场景。
4. 固定定位：fixed（相对于视口）
position: fixed; 元素脱离文档流，其“初始位置”基于浏览器视口（viewport）。即使页面滚动，元素位置不变。
- 默认情况下，若未设偏移，表现类似于
top: 0; left: 0;，出现在视口左上角。 - 适合做导航栏、返回顶部按钮等需要固定显示的组件。
5. 粘性定位：sticky（混合行为）
position: sticky; 是 relative 和 fixed 的结合体。元素在父容器内表现为相对定位，当滚动到特定阈值时，变为固定定位。
- 必须设置一个偏移值（如
top: 10px）才能生效。 - “初始位置”仍是其在文档流中的位置，直到触发粘性条件。
基本上就这些。掌握每种 position 的初始参考点和偏移逻辑，就能准确控制元素位置。关键在于理解“参考谁”和“是否脱离文档流”。
