绝对定位
本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 57 课，共 76 课。
在 CSS 中，绝对定位可以让你将元素准确地放置在容器内你想要的位置。
将 position: absolute; 设置为元素的定位方式后，该元素会从常规布局中移除，因此其他元素会认为它不存在。它会根据最近的、设置了定位方式（不是 static）的祖先元素来定位。如果没有这样的祖先元素，它就会相对于页面定位。
以下是使用绝对定位的基本语法：
.parent {
position: relative; /* 将父元素设为已定位的祖先元素 */
}
.child {
position: absolute;
top: value;
right: value;
bottom: value;
left: value;
}.parent：用于定位父元素的 CSS 选择器。设置position: relative;后，子元素可以使用绝对定位。
.child：用于选中你想要绝对定位的元素的 CSS 选择器。
position: absolute;：此声明将元素的定位方式设为绝对定位，使其脱离正常文档流。
top、right、bottom、left：这些属性用于指定元素相对于最近的已定位祖先元素的位置。你可以使用正值或负值，单位可以是像素（px）、em（em）、百分比（%）或其他有效的 CSS 单位。
例如：
.parent {
position: relative;
width: 400px;
}
.child {
position: absolute;
top: 50px;
left: 100px;
width: 200px;
}在这个示例中，.parent 元素被设置为定位祖先，其定位方式为 position: relative;。.child 元素使用 position: absolute; 进行绝对定位，其位置设置为距最近的定位祖先（即 .parent 元素）顶部 50 像素、左侧 100 像素。
挑战
简单给你一个 HTML 文档，其中有一个父级分区（<div>），包含两个子级分区（<div>），它们的类分别是 box1 和 box2。你的任务是使用绝对定位，将 box2 元素放置在 parent 内。按以下步骤操作：
- 编写一条 CSS 规则，选择类为
parent的<div>元素。将它的position属性设为relative，使其成为定位祖先。 - 编写一条 CSS 规则，选择类为
box2的<div>元素。 - 将
.box2元素的position属性设为absolute。 - 将
.box2元素的top属性设为30px，并将right属性设为20px。这样，方框就会位于其定位祖先（parent）顶部向下 30 像素、右侧向左 20 像素的位置。
亲手试试
<html>
<head>
<title>Absolute Positioning</title>
<style>
.parent {
width: 400px;
height: 300px;
border: 1px solid black;
}
.box1 {
width: 100px;
height: 100px;
background-color: lightblue;
}
.box2 {
width: 150px;
height: 120px;
background-color: lightgreen;
}
/* Write CSS rules here */
</style>
</head>
<body>
<div class="parent">
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
</div>
</body>
</html>
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
使用 CSS 添加样式中的所有课
自己练习： Web 在线编辑器