CSS 布局模式，有时简称为布局，是一种基于盒子与其兄弟和祖辈盒子的交互方式来确定盒子的位置和大小的算法。也可以理解成定义网页中各个元素的排列方式，把元素按照正确的大小放在合适的位置。传统PC端有三种布局方式，常规流、浮动、定位。而常规流又被称作标准流也就是我们所熟知的盒子模型。本次分享CSS布局中的定位。
定位的作用：可以让元素自由的摆放在网页的任意位置，一般用于盒子层叠问题。
常见应用场景：
1、解决盒子与盒子之间的层叠问题，定位后的元素层级最高，可以层叠在其他盒子上面。
2、让盒子始终固定在屏幕的某个位置。
定位基本语法 ：
1、定位属性名：position;
2、定位属性值：
static 静态定位（默认 position:static;）
relative 相对定位
absolute 绝对定位
fixed 固定定位
边偏移：
边偏移属性：
top 顶端偏移量 例如：top:80px;
bottom 底部偏移量 例如：bottom:45px;
left 左侧偏移量 例如：left:23px;
right 右侧偏移量 例如 ：right:90px;
相对定位：position:relative;
特点：配合方向属性移动；相对于原位置移动；在页面中占有位置（没有“脱标”）；
绝对定位：position:absolute;
相对于非静态定位的父元素进行定位移动
特点：配合方向属性移动；默认相对于浏览器可视区域移动；在页面中不占位置（已“脱标”）；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
position: relative;
width: 500px;
height: 500px;
background-color: palegreen;
}
.son{
/\* position: relative; \*/
width: 300px;
height: 300px;
background-color: skyblue;
}
.sun{
/\* 当前面没有设置定位的时候 绝对定位是基于body的 \*/
position: absolute;
/\* left: 20px;
top: 30px; \*/
right: 50px;
bottom: 60px;
width: 100px;
height: 100px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
<div class="sun"></div>
</div>
</div>
</body>
</html>
固定定位：position:fixed;
相对于浏览器进行定位移动。在浏览器页面滚动时元素的位置不会变。
特点：配合方向属性移动；相对于浏览器可视化区域进行移动；在页面中不占位置（已“脱标”）；具备行内块元素的特点（建议设宽高）
定位口诀：子绝父相
如果子级使用绝对定位，父级就要使用相对定位。子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。父盒子需要加定位限制子盒子在父盒子内显示。父盒子布局时，需要占有位置，因此父亲只能是相对定位。
定位居中：使用子绝父相，让子盒子在父盒子居中。
1、无法使用 margin: 0 auto；
2、设置left: 50%; margin-left:-(宽度一半)px;
top: 50%; margin-top:-(高度一半)px;
3、left: 50%;
top: 50%;
transform: translate(-50%,-50%);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
position: absolute;
/\* 绝对定位 无法通过margin: 0 auto;实现绝对定位 \*/
/\* margin: 0 auto; \*/
/\* left: 50%; 参照物50%位置 靠右 加上margin-left: -150px;就实现了居中\*/
left: 50%;
/\* margin-left: -150px; \*/
/\* top: 50%; 参照物50%位置 靠下 加上margin-top: -150px; 就实现了居中 \*/
top: 50%;
/\* margin-top: -150px; \*/
/\* 位移：自己宽度高度的一半 \*/
transform: translate(-50%,-50%);
width: 300px;
height: 300px;
background-color: paleturquoise;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
