freeCodeCamp 课程解析：用 CSS 偏移属性（top/bottom/left/right）移动相对定位元素

2026-09-06 13:02:40作者：彭桢灵Jeremy

本文围绕 freeCodeCamp 响应式网页设计课程中的一道核心练习「Move a Relatively Positioned Element with CSS Offsets」展开，系统讲解 CSS 偏移属性 top、bottom、left、right 如何配合 position: relative 移动元素。读完本文，你将理解「偏移是远离参照边、朝向反方向移动」这一关键心智模型，能够独立完成元素的相对位移，并看懂 freeCodeCamp 官方测试是如何用 getComputedStyle 验证位移效果的。

题目来源与课程定位

该练习位于课程块 applied-visual-design 中，对应的挑战文件是 curriculum/challenges/english/blocks/applied-visual-design/587d781e367417b2b2512aca.md，dashedName 为 move-a-relatively-positioned-element-with-css-offsets，challengeType: 0（即代码编辑器类挑战）。

从块结构文件的 challengeOrder 可以看到，这道题处于定位知识的关键衔接点：

587d781e367417b2b2512ac9 —— Change an Element's Relative Position（为元素设置 position: relative 并首次使用 top 偏移）
587d781e367417b2b2512aca —— 本文题目：继续用 left / bottom 偏移精确移动元素
587d781e367417b2b2512acb —— Lock an Element to its Parent with Absolute Positioning（转向 position: absolute）

上一题 587d781e367417b2b2512ac9.md 已铺垫了完整背景：CSS 把每个 HTML 元素视为独立的盒（盒模型），块级元素自动换行、行内元素嵌入周围内容，这种默认排版称为正常流（normal flow）；将 position 设为 relative 后，可以用 left/right 与 top/bottom 偏移属性，按像素、百分比或 em 指定元素离开其正常位置的移动量。且相对定位不会把元素移出正常流——周围元素仍按它「原位」对待。本主题正是在此基础上要求双向精确位移。

核心概念：偏移方向是「远离参照边」

原文档给出的定义是整个主题的精华：

top 或 bottom、left 或 right 这些 CSS 偏移，告诉浏览器元素相对于它在文档正常流中的位置偏移多远。你把元素从某个位置移开，即让元素远离参照的那一侧——效果上等于朝相反方向移动。

具体而言，四条偏移的语义方向是：

偏移属性	参照边	实际移动方向
`top: 15px`	元素正常位置的顶部	向下移动 15px
`bottom: 10px`	元素正常位置的底部	向上移动 10px
`left: 15px`	元素正常位置的左侧	向右移动 15px
`right: 20px`	元素正常位置的右侧	向左移动 20px

文档特别点出一个易错点：「正如你在上一题看到的，top 偏移让 h2 向下移动了；同理，使用 left 偏移会把元素向右移动」。初学者直觉上容易认为 top: 10px 是「贴到上方」，实际它是「从上方推离 10px」，即向下推。这个反直觉的方向约定是理解本题的关键。

实操：把 `h2` 右移 15px、上移 10px

题目要求：

Use CSS offsets to move the h2 15 pixels to the right and 10 pixels up. 使用 CSS 偏移，把 h2 向右移动 15 像素、向上移动 10 像素。

初始种子代码（seed）

题目自带的编辑器初始代码如下（来自文档 --seed-contents-- 段）：

<head>
<style>
  h2 {
    position: relative;


  }
</style>
</head>
<body>
  <h1>On Being Well-Positioned</h1>
  <h2>Move me!</h2>
  <p>I still think the h2 is where it normally sits.</p>
</body>

种子中 position: relative 已预先设置（延续上一题），<style> 内留有空白待填写。注意正文里那句 I still think the h2 is where it normally sits.——它暗示了相对定位的特性：后面的 <p> 仍然认为 h2 待在原来的位置，正常流布局不受相对定位影响。

目标位移到偏移属性的映射

按照上一节的方向表，把目标方向翻译成「远离哪条边」：

向右移动 15px → 远离 left 边 → left: 15px
向上移动 10px → 远离 bottom 边 → bottom: 10px

参考解答（solutions）

文档 --solutions-- 段给出的完整正确代码：

<head>
<style>
  h2 {
    position: relative;
    left: 15px;
    bottom: 10px;
  }
</style>
</head>
<body>
  <h1>On Being Well-Positioned</h1>
  <h2>Move me!</h2>
  <p>I still think the h2 is where it normally sits.</p>
</body>

只需在种子代码的 h2 规则中补上两行：left: 15px; 与 bottom: 10px;。

官方测试如何验证：getComputedStyle 断言

这道题的判定不靠肉眼，而是通过 --hints-- 段中给出的两段断言逻辑来验证渲染结果。两段测试都先取出 h2 元素，再读取它的计算后样式：

验证「上移 10px」（即 bottom 偏移）：

const h2Element = document.querySelector('h2');
const h2Style = window.getComputedStyle(h2Element);
assert.equal(h2Style?.bottom, '10px');

验证「右移 15px」（即 left 偏移）：

const h2Element = document.querySelector('h2');
const h2Style = window.getComputedStyle(h2Element);
assert.equal(h2Style?.left, '15px');

这里有两个值得注意的工程细节：

读的是 bottom 和 left，而不是「方向名」。断言与 CSS 属性一一对应——想验证「向上」，检查的就是 bottom: 10px。这与核心概念「偏移参照边、朝反方向移动」完全一致，测试本身就在强化这个心智模型。
window.getComputedStyle 返回的是计算后的样式值，即浏览器最终生效的像素/长度字符串（如 '10px'、'15px'），因此断言值写成带单位字符串。这也是浏览器端测试 DOM 样式的标准做法：querySelector 定位元素 → getComputedStyle 取样式 → assert.equal 校验。

从挑战模式定义看，challenge-schema.js 中 solutions 被定义为文件数组的数组（Joi.array().items(Joi.array().items(fileJoi))），seed 允许空字符串，即每道编辑器挑战都由「种子代码 + 解答 + 测试断言」三件套构成。本文题目的 Markdown 文件严格遵循该结构：--seed--/--seed-contents-- 提供起点，--solutions-- 提供通过断言的完整代码。

常见错误排查

结合断言逻辑，初学者在这道题上容易踩的坑有：

写 top: 10px 想上移：top 会让元素向下走，断言 bottom === '10px' 会失败。上移必须用 bottom。
写 right: 15px 想右移：right 会让元素向左走。右移必须用 left。
只写偏移不写 position: relative：偏移属性只对定位生效的元素起作用。static（默认）元素上写 left: 15px 不会有任何位移，getComputedStyle 返回的 left 也不是 '15px'。本题种子代码已预置 position: relative，但独立练习时须自行补上。
单位缺失或写错：断言精确比较字符串 '10px'，写成 10、10PX 或 0.625rem 都会导致不等（getComputedStyle 对长度类型一般归一化为 px 字符串，但断言值要求严格一致）。

与前后题目的关系：定位系列全景

把本题放回定位系列，可以看到课程设计的递进逻辑：

前一站（Change an Element's Relative Position）：设置 position: relative + 单方向 top: 15px（下移），并强调「注意周围 h1 和 p 的位置不受影响」——因为相对定位不脱离正常流。
本站（本文题目）：双方向位移 left + bottom，训练「参照边 → 反方向」的完整映射。
下一站（Lock an Element to its Parent with Absolute Positioning）：切换到 position: absolute。与 relative 最大的区别是元素脱离正常流，周围元素直接忽略它；它锁定在最近的已定位祖先（通常是父级显式声明的 position: relative）相对，若祖先链上没有任何定位元素，浏览器会一路上溯默认以 body 为参照。下一题的任务是把 #searchbar 用 top: 50px; right: 50px 锁到 section 父容器的右上角。
再往后还有 position: fixed（锁定相对浏览器视口）、float 与 z-index 等，构成完整的 CSS 定位知识链。

小结

top/bottom、left/right 偏移的含义是「元素远离该边的距离」，实际移动方向与属性名相反：top → 下移、bottom → 上移、left → 右移、right → 左移。
本题目标「右移 15px、上移 10px」对应的代码是 left: 15px; bottom: 10px;，且必须以 position: relative 为前提。
相对定位不改变正常流布局：元素视觉位置变了，但它在文档流中占位不变，屏幕阅读器等辅助技术仍按 HTML 原始顺序访问内容——这也是课程在前一题「Note」中强调的可访问性原则。
判定逻辑基于 document.querySelector + window.getComputedStyle + assert.equal，直接比对计算样式中的 left/bottom 值，是浏览器端样式断言的标准范式。