相对定位
本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 56 课，共 76 课。
在 CSS 中，相对定位是一种定位方案，可以让你相对于元素在文档流中的正常位置来定位元素。当元素设置为 position: relative; 时，它仍处于正常流中，但你可以使用 top、right、bottom 和 left 属性，使它偏离原来的位置。
以下是使用相对定位的基本语法：
selector {
position: relative;
top: value;
right: value;
bottom: value;
left: value;
}position: relative;：此声明将元素的定位方式设为相对定位。top、right、bottom、left：这些属性用于指定元素相对于其正常位置的偏移量。你可以使用正值或负值，单位可以是像素（px）、em（em）、百分比（%）或其他有效的 CSS 单位。
例如：
.box {
position: relative;
top: 20px;
left: 30px;
}在这个示例中，带有 box 类的元素会相对于它在文档流中的正常位置向下移动 20 像素，向右移动 30 像素。它原来占据的空间会保留，其他元素不会流入这片空间。
挑战
简单给你一个 HTML 文档，其中有一个包含三个子级 <div> 的分区（<div>），它们的类分别是 box1、box2 和 box3。你的任务是使用相对定位移动 box2 元素。按照以下步骤操作：
- 编写一条 CSS 规则，定位类为
box2的<div>元素。 - 将
.box2元素的position属性设置为relative。 - 将
.box2元素的top属性设置为20px，并将left属性设置为40px。这样会使这个方框相对于原来的位置向下移动 20 像素，向右移动 40 像素。
亲手试试
<html>
<head>
<title>Relative Positioning</title>
<style>
.container {
width: 400px;
height: 200px;
border: 1px solid black;
}
.box1 {
width: 100px;
height: 100px;
background-color: lightblue;
}
.box2 {
width: 100px;
height: 100px;
background-color: lightgreen;
}
.box3 {
width: 100px;
height: 100px;
background-color: lightcoral;
}
/* Write CSS rules here */
</style>
</head>
<body>
<div class="container">
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>
</div>
</body>
</html>
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
使用 CSS 添加样式中的所有课
自己练习： Web 在线编辑器