1.元素的定位属性
边偏移属性：left、right、top、bottom
定位模式：position：static/relative/absolute/fixed
定位=边偏移+定位模式。
2.静态定位 position:static
静态定位是所有元素的默认定位，使用静态定位，偏移量无法改变元素的位置。静态定位的主要作用是用于消除定位。
3.相对定位 position:relative
使用相对定位可以使用偏移量改变元素的位置，但是原来所占的位置，继续占有，并且每次移动的位置是以自己左上角的基点移动。
注意：相对定位不脱离标准流，会占位置。
div {
background-color: purple;
position: relative;
left: 100px;
top: 150px;
}
4.绝对定位 position:absolute
可以通过偏移移动位置，而且是完全脱标，不占位置。
如果父级元素没有定位，那么子级元素的绝对定位以浏览器为准；
如果父级有定位，那么子级元素以最近已经定位的父级元素为准，父级的定位可以是relative或者absolute，称为子绝父相或者子绝父绝。
使用最多的是 子绝父相。
5.子绝父相
相对定位：占有位置 不脱标
绝对定位：不占有位置 脱标
在页面布局中，经常使用父级是相对定位 子级是绝对定位 例如：页面图片的轮播。
6.利用定位实现水平垂直居中
没有实现定位的盒子居中方法采用的是margin:上下间距 auto;采用定位后，不能够再使用margin方式居中。
水平居中：left:50%;父级元素的50%的位置，margin-left:-本身盒子宽度的一半(width/2);也就是自己再移动50%的距离
垂直居中：top:50%，margin-top:-height/2;
.father {
width: 500px;
height: 500px;
background-color: red;
position: relative; /*父级元素相对定位，占有位置*/
}
.son {
width: 200px;
height: 200px;
background-color: skyblue;
position: absolute; /*子级元素绝对定位，不占有位置*/
/* 水平居中 */
left: 50%;
margin-left: -100px;
/* 垂直居中 */
top:50%;
margin-top: -100px;
}
7.固定定位 position:fixed
固定定位不占有位置，不随着滚动条移动而移动，与父级元素无关，只和浏览器有关，使用固定定位的元素一定要设置宽度和高度，除非有内容撑开。
8.叠加次序
多个元素同时设置定位时，定位元素会出现重叠现象
在CSS中药想调整定位元素的堆叠顺序，可以使用z-index属性取值：负整数/0/正整数 。
9.定位总结
定位模式 是否脱标占有位置 是否可以使用边偏移 移动位置基准
静态static 不脱标，正常模式 不可以 正常模式
相对定位relative 不脱标，占有位置 可以 相对自身位置移动（自恋型）
绝对定位absolute 完全脱标，不占有位置 可以 相对于定位父级移动位置（拼爹型）
固定定位fixed 完全脱标，不占有位置 可以 相对于浏览器移动位置（认死理型）
10.定位模式转换
使用定位和使用浮动一样，元素会发生模式转换，使用绝对定位和固定定位之后，元素会转换为行内块元素，此时直接给高度和宽度即可，不需要进行模式转换。
来源：CSDN
作者：weixin_43900407
链接：https://blog.csdn.net/weixin_43900407/article/details/104130367