1.绝对定位(absolute)
a.若没有父元素，参照物为整个文档。
b.默认情况下参照物为已经做定位的父元素。
c.添加绝对定位的元素，会脱离整个布局流，破坏布局空间。
2.相对定位(relative)
a.参照物为自身的默认位置。
b.占据空间。
c.不会占据布局流。
3.固定定位(fixed)
a.参照物为浏览器窗口。
4.粘性定位
a.是relative和fixed的结合。
b.当页面没有触发滚动条的时候，执行的效果是position:relative，反之执行的是position:fixed。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
body{
height: 10000px;
}
div{
width: 100px;
height: 100px;
}
#guDing{
background: lightgreen;
position: fixed;
left: 500px;
top: 200px;
}
#xiangDui{
background: lightcoral;
position: relative;
/*相对定位不会脱离原本的文档流*/
left: 100px;
top: 100px;
}
#jueDui{
background: lightblue;
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div id="guDing"></div>
<div id="xiangDui"></div>
<div id="jueDui"></div>
<!-- 定位三种:
固定定位:相对于浏览器
相对定位:相对于原本的位置，依就会占据原本的空间
绝对定位:相对于离它最近的已定位父级定位
-->
</body>
</html>