定位基础
本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 55 课，共 76 课。
在 CSS 中，定位是一组属性，可用于控制网页上元素的位置。默认情况下，元素会按照 HTML 文档的正常流进行定位。不过，使用 CSS 定位时，你可以将元素移出正常流，并将它们放置在相对于其包含元素或视口（浏览器窗口的可见区域）的特定位置。
position 属性有几个不同的值，每个值的行为都不同：
static：这是默认值。元素按照文档的正常流进行定位。top、right、bottom和left属性不会产生任何效果。
relative：元素相对于其正常位置进行定位。设置top、right、bottom和left属性会使元素偏离其正常位置，但它仍会占据正常文档流中的空间。
absolute：元素会从正常文档流中移除，并相对于最近的已定位祖先元素（位置不是static的祖先元素）进行定位。如果找不到已定位的祖先元素，则相对于初始包含块（通常是视口）进行定位。
fixed：该元素会从正常文档流中移除，并相对于视口定位。即使页面滚动，它也会固定在原处。
这是使用 position 属性的基本语法：
selector {
position: value;
}value：所需的定位方式（例如，static、relative、absolute、fixed、sticky）。
挑战
简单给你一个 HTML 文档，其中有一个父级分区（<div>），里面包含一个子级分区（<div>）。你的任务是使用 position 属性更改这些元素的定位上下文。按照以下步骤操作：
- 编写一条 CSS 规则，选中带有
container类的<div>元素。将它的position属性设为relative。这样，它就会成为其子元素的定位祖先。 - 编写一条 CSS 规则，选中带有
box类的<div>元素。将它的position属性设为absolute。这样，它就会脱离正常文档流，并且可以相对于最近的定位祖先（container）进行定位。 - 将
.box元素的top属性设为50px，并将left属性设为100px。这样，方框就会定位在其定位祖先（container）顶部向下 50 像素、左侧向右 100 像素处。
亲手试试
<html>
<head>
<title>Positioning Basics</title>
<style>
.container {
width: 400px;
height: 300px;
border: 1px solid black;
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
}
/* Write CSS rules here */
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
使用 CSS 添加样式中的所有课
自己练习： Web 在线编辑器