在此之前，我们学习了浮动布局。浮动布局比较灵活，但是不容易控制。而定位布局的出现，使得用户精准定位页面中的任意元素成为可能，此时页面布局操作也变得更加随心所欲。当然了，由于定位布局缺乏灵活性，也给空间大小和位置不确定的版面布局带来困惑。因此在实际开发中，大家应该灵活使用这两种布局方式，这样才可以更好地满足开发需求。
CSS 定位使你可以将一个元素精确地放在页面上你指定的地方。联合使用定位和浮动，能够创建多种高级而精确地布局。其中，定位布局共有 5 种方式。
- 静态定位（static）。
- 固定定位（fixed）。
- 相对定位（relative）。
- 绝对定位（absolute）。
- 粘性定位（sticky）。
这 5 种方式都是通过 position 属性来实现的，其中 position 属性取值如下表所示。
| 属性值 | 说明 |
|---|---|
| static（默认值） | 静态定位 |
| fixed | 固定定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| sticky | 粘性定位 |
示例：CSS 静态定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
position: static;
width: 100px;
height: 100px;
background-color: hotpink;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
</body>
</html>页面效果如下图所示。
分析：
由于 position 属性的默认值就是 static，对于上面例子来说，position: static; 这一句代码可以省略，此时效果效果是一样的。在接下来的章节中，我们再来详细介绍其他定位方式。
