静态定位与相对定位
理解默认的静态位置，以及相对定位如何将元素从正常位置移动。
静态定位与相对定位 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
position 属性
position 属性控制元素在文档流中的放置方式。五个值分别是：static、relative、absolute、fixed 和 sticky。
position: static（默认值）
每个元素的默认值都是 position: static。静态元素遵循正常文档流——块级元素垂直堆叠，行内元素从左向右排列。偏移属性（top、right、bottom、left）不起作用。
position: relative
position: relative 会使元素保持在正常流中，但允许您使用 top、right、bottom、left，使其相对于自身的正常位置进行偏移。
<div class="shifted">Shifted 10px down, 20px right — original space still reserved.</div>
要点：空间会保留
当您将 position: relative 与偏移量结合使用时，元素会在视觉上移动，但其原始布局空间仍会保留。其他元素不会填补这个空隙。
顶部、右侧、底部和左侧
偏移属性会使元素从其参考点移动：
top：从顶部边缘向下移动left：从左侧边缘向右移动- 负值会反转移动方向
<span class="badge">NEW</span>
z-index 需要定位
z-index 只对已定位元素有效（静态元素无效）。如果需要控制层叠顺序，至少要设置 position: relative。
<div class="tooltip">Tooltip (relative + z-index)</div>
将 relative 用作包含块
position: relative 最重要的用途，是让元素成为绝对定位子元素的包含块——即使没有设置任何偏移值也可以。
<div class="card">Card content<span class="card__badge">Badge</span></div>
relative 与 transform 的组合
将 position: relative 与 transform 结合使用会创建新的层叠上下文。元素仍然处于文档流中，但可以进行视觉变换。
<div class="hover-lift demo-hover">Hover me — I lift up</div>
何时 NOT 使用 relative
请避免为每个元素都设置 position: relative。这会创建层叠上下文，使 z-index 管理变得复杂。只有在需要偏移或需要为绝对定位子元素设置锚点时，才应使用它。
与过渡结合使用
由于相对定位不会影响布局流，因此您可以安全地为视觉效果设置 top/left 的动画——不过为 transform: translate() 设置动画具有更高的性能。
<div class="shake demo-hover">Hover me — I shake</div>
调试定位问题
在 DevTools 中，查看计算面板以了解实际生效的 position 值。盒模型图会显示所应用偏移量的精确坐标。
快速检查
对元素应用 position: relative; top: 20px 后，该元素的布局空间会发生什么变化？
回顾
position: static 是默认值——没有偏移，也不会产生层叠。position: relative 允许元素相对于自身位置进行偏移，并保留其布局空间。它最重要的作用是充当绝对定位子元素的包含块。
常见问题解答
「静态定位与相对定位」课时是免费的吗？
是的 — 「静态定位与相对定位」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「静态定位与相对定位」这节课中我会学到什么？
理解默认的静态位置，以及相对定位如何将元素从正常位置移动。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「静态定位与相对定位」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 静态定位与相对定位
- 绝对定位与包含块
- 固定定位与粘性定位
- Z-index 与堆叠上下文