<!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: lightblue;
position: fixed;
left: 500px;
top: 200px;}
#xiangDui{background: lightcoral;
position: relative;
left: 100px;
top: 100px;}
#jueDui{background: lightgreen;
position: absolute;
left: 100px;
top: 100px;}
</style>
</head>
<body>
定位三种：
固定定位:相对于浏览器定位
相对定位:不会脱离原本的文档流。相对于原本的位置定位（依然会占据原来的空间）
绝对定位:相对于离他最近的已定位父级定位
<div id="guDing"></div>
<div id="xiangDui"></div>
<div id="jueDui"></div>
</body>
</html>
1、绝对定位
绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不会占据空间。
绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定为的元素没有已定位的祖先元素作为参考值，则相对于整个网页。
position：absolute；
2、相对定位
position：relative；
相对定位与绝对定位的区别在于它的参照点不是左上角的原点，而是该元素本身原先的起点位置。并且即使该元素偏移到了新的位置，也仍然从原始的起点处占据空间。
3、固定定位
position：fixed；
固定定位永远都会相对于浏览器窗口进行定位，固定定位会固定在浏览器的某个位置，不会随滚动条滚动。最常用的就是电脑里面是不是弹出的小广告，如果你不差掉它，当时滑动鼠标查看网页时，小广告一直会在那里，还有常用的就是网站或者APP的导航栏和底部的选择栏