position 定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。
CSS中定位分类有四种：
1.position: static;静态定位
- 对象遵循常规流，默认定位选项
- top、bottom、left、right、z-index 属性不起作用
- 元素和元素之间不会重叠，这个位置就是元素的默认位置
- 相邻元素都设置外边距，最终外边距=两者外边距中最大的
- 左右外边距设置auto,这个块水平居中
2.position: relative; 相对定位
- 相对于其父级元素（无论父级元素此时为何种定位方式）进行定位，准确地说是相对于其父级元素所剩余的未被占用的空间进行定位（在父元素由多个相对定位的子元素时可以看出），且会占用该元素在文档中初始的页面空间，即在使用top，bottom，left，right进行移动位置之后依旧不会改变其所占用空间的位置。可以使用z-index进行在z轴方向上的移动。
3.position: absolute; 绝对定位
- 定位上下文：绝对定位元素的父元素的position属性。
- 盒子脱离html文档，相对于某一个拥有（相对定位和绝对定位）的父盒子来定位，如果盒子的父元素都没有（相对定位和绝对定位），它相对于根元素html来定位,(必须写默认的left值和top值,否则它的位置还在原来的位置.)
例如：想要一个页面的div居中居中在页面的中间位置
<div class="box1">
<div class="box2">
div块
</div>
</div>
</body>
<style>
.box1 {
position: relative;
}
.box1 .box2 {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, 50%);
border-radius: 20px;
background-color: aqua;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
</style>
4.position: fixed; 固定定位
- 定位上下文：偏移定位是以窗口为参考。