虽然浮动布局比较灵活，但是不容易控制，定位布局的出现，使得用户精准定位页面中的元素成为可能，页面布局也随心所欲。但定位布局缺乏灵活性，给空间大小和位置不确定的版面布局带来困惑，所以在实际开发中，要灵活使用这两种布局。
定位布局使用 position 属性来实现，属性值如下：
| 属性值 | 说明 |
|---|---|
| fixed | 固定定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| static | 静态定位（默认值） |
一、固定定位
固定定位的实现方式：position:fixed;，固定的元素不会随着滚动条的拖动而改变位置，要结合 top、bottom、left、right 属性一起使用，用来规定元素相对于浏览器的位置，这四个属性一般只用到两个，参考值是浏览器的四条边。
有如下示例：
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="个人主页，HTML学习笔记"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="学习示例"/>
<meta name="copyright" content="版权所有，转载前请联系"/>
<style type="text/css">
.div1{
height: 2000px;
width: 200px;
background-color: rgb(141, 212, 120);
display: table-cell;
vertical-align: middle;
}
.div2{
height: 100px;
width: 100px;
position: fixed;
background-color: darkseagreen;
top: 100px;
left:300px;
}
</style>
</head>
<body>
<div class="div1">没有设置定位的元素</div>
<div class="div2">设置了定位的元素</div>
</body>
</html>
右边 div 在滚动条滚动时位置不变，左边变化：
固定定位最常见的一个应用：回顶部按钮。
二、相对定位
相对定位的实现方式：position:relative;，相对定位是指元素的位置相对于原始位置计算而来的，也要搭配 top、bottom、left、right 四个属性使用，通常使用两个即可。
固定定位是相对于浏览器的位置，绝对定位是相对于元素本身的位置。
当两个 div 均没有设置定位时：
现在，使第一个 div 不变，为第二个 div 设置相对定位：
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="个人主页，HTML学习笔记"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="学习示例"/>
<meta name="copyright" content="版权所有，转载前请联系"/>
<style type="text/css">
.div1{
height: 100px;
width: 200px;
background-color: rgb(141, 212, 120);
}
.div2{
height: 100px;
width: 200px;
background-color: darkseagreen;
position: relative;
top: 20px;
left:20px;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>
</html>
可以看到，元素相对于它原来的位置偏移了：
我们再加一个不设置定位的 div3：
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="个人主页，HTML学习笔记"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="学习示例"/>
<meta name="copyright" content="版权所有，转载前请联系"/>
<style type="text/css">
.div1, .div3{
height: 100px;
width: 200px;
background-color: rgb(141, 212, 120);
}
.div2{
height: 100px;
width: 200px;
background-color: darkseagreen;
position: relative;
top: 20px;
left:20px;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>
在浏览器中效果如下：
由上图可见，虽然第二个 div 较原来的位置偏移了，但它仍然占据未偏移时的位置，并不影响文档流，其后的元素仍按原始文档流排列。
三、绝对定位
使用方式：position:absolute; ，当使用绝对定位时，此元素脱离文档流，其他元素会当这个元素不存在。此属性也要结合 top、bottom、left、right 属性一起使用，通常只需要两个，参考对象是浏览器的四条边,参考对象是距离此元素最近的非 static 定位的祖先元素。（感谢 @2021Free 的指正，具体解释在文章最后一部分）
有如下示例，div2 为绝对定位：
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="个人主页，HTML学习笔记"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="学习示例"/>
<meta name="copyright" content="版权所有，转载前请联系"/>
<style type="text/css">
.div1, .div3{
height: 100px;
width: 200px;
background-color: rgb(141, 212, 120);
border: 1px solid black;
}
.div2{
height: 50px;
width: 50px;
background-color: azure;
position: absolute;
top: 50px;
left:50px;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>
在浏览器中效果如下：
由上图可见，绝对定位的 div2 已经脱离文档流，不影响其他元素的排列。
四、静态定位
在默认情况下，元素是静态定位的，即正常出现在标准文档流中，对其的 top、bottom、left、right 不生效。
五、绝对定位的参考对象
绝对定位的参考对象是距离此元素最近的非 static 定位的祖先元素。
- 首先是祖先元素均为 static 定位的情况：
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="个人主页，HTML学习笔记"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="学习示例"/>
<meta name="copyright" content="版权所有，转载前请联系"/>
<style type="text/css">
.div1{
height: 400px;
width: 400px;
background-color: rgb(141, 212, 120);
border: 1px solid black;
}
.div2{
height: 100px;
width: 100px;
background-color: azure;
}
.div3{
height: 100px;
width: 100px;
background-color: blueviolet;
position:absolute;
top: 200px;
left:0px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<div class="div3">
我是绝对定位元素
</div>
</div>
</div>
</body>
</html>
div3 为绝对定位，为了便于观察，将 div3 的左偏移设为 0 ，可见当元素的所有祖先元素均为 static 定位时，元素绝对定位是相对于浏览器的四条边偏移：
- 改变 div1 的定位方式：
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="个人主页，HTML学习笔记"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="学习示例"/>
<meta name="copyright" content="版权所有，转载前请联系"/>
<style type="text/css">
.div1{
height: 400px;
width: 400px;
background-color: rgb(141, 212, 120);
border: 1px solid black;
position: relative;
}
.div2{
height: 100px;
width: 100px;
background-color: azure;
}
.div3{
height: 100px;
width: 100px;
background-color: blueviolet;
position:absolute;
top: 200px;
left:0px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<div class="div3">
我是绝对定位元素
</div>
</div>
</div>
</body>
</html>
这时，div3 的定位便相对于 div1 偏移（左偏移为 0 时，紧贴着 div1 的左 border）：
- 同时改变 div1 和 div2 的定位方式：
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="个人主页，HTML学习笔记"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="学习示例"/>
<meta name="copyright" content="版权所有，转载前请联系"/>
<style type="text/css">
.div1{
height: 400px;
width: 400px;
background-color: rgb(141, 212, 120);
border: 1px solid black;
position: relative;
}
.div2{
height: 100px;
width: 100px;
background-color: azure;
position: relative;
left: 20px;
top: 20px;
}
.div3{
height: 100px;
width: 100px;
background-color: blueviolet;
position:absolute;
top: 200px;
left:0px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<div class="div3">
我是绝对定位元素
</div>
</div>
</div>
</body>
</html>
可以发现，div3 此时的定位是相对于 div2 进行偏移的，由此体现了 “最近祖先”：
综上，可得绝对定位的元素在其所有祖先元素均为 static 定位时，偏移值参考浏览器的四条边；当有非 static 定位的祖先元素时，偏移值参考最近的非 static 定位的祖先元素。
