1.
设置定位方式：
属性名：posotion
静态定位：static（不定位）
相对定位：relative
绝对定位：absolute
固定定位：fixed
2.设置偏移值，水平和垂直方向各选一个使用
水平：right left 数字+px
垂直：top bottom 数字+px
（1）相对定位：有上下左右四个同时存在，以left和top为准。
1.占有原来的位置
2.仍然具体标签原有的显示模式特点
3.改变位置参照自己原来的位置
（2）绝对定位：拼爹型定位，相对于非静态定位的父元素进行定位移动（定义）
先找已经定位的父级，如果有这样的父级就以这个父级为参照物
有父级，但没有定位，以浏览器窗口为参照进行定位
1.脱标，不占标准流的位置
2.改变标签的显示模式特点：行内块
3.绝对定位的盒子不能使用左右margin auto居中
（3）子绝父相：
绝对定位查找父级的方式：就近找定位的父级，如果逐层查找不到这样的父级，就以浏览器窗口为参照定位
（4）绝对定位居中：
<style>
.box{
position: absolute;
left:50%;
margin-left:-150px;
bottom:50%;
margin-bottom:-150px;
width: 300px;
height: 300px;
background-color: pink;
}
</style>left:50%; 整个盒子移动到浏览器中间偏右的位置
margin-left:-150px; 把盒子向左侧移动:自己宽度的一半
（自动版）transform:translate(-50%,-50%)
位移：自己宽度高度的一半
<style>
.box{
position: absolute;
top:50%;
left:50%;
/* 位移：自己宽度高度的一半 */
transform: translate(-50%,-50%);
width: 300px;
height: 300px;
background-color: pink;
}
</style>绝对定位的盒子显示模式具备行内块特点：加宽度高度生效，如果没有宽度也没有内容，盒子的宽度尺寸为0。
子绝父相的案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.banner{
position: relative;
margin:0 auto;
width: 1226px;
height: 600px;
}
.mask{
position: absolute;
left: 0;
bottom: 0;
/* 绝对定位的盒子显示模式具备行内块特点：加宽度高度生效，如果没有宽度也没有内容，盒子的宽度尺寸为0 */
width: 1226px;
/* 如果父级和子级的宽度相同，可以写成width:100%; */
height: 120px;
background-color: rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div class="banner">
<img src="./bg.jpg" alt="">
<!-- mask遮罩 -->
<div class="mask"></div>
</div>
</body>
</html>样图：
（5）固定定位：
position:fixed
1.改变位置参考浏览器窗口
2.脱标，不占位置
3.具备行内块特点，可以改变宽高
元素层级问题 - > 不同布局方式元素的层级关系：标准流 < 浮动 < 定位
不同定位之间的层级关系：相对、绝对、固定默认层级相同（默认情况下，定位的盒子后来者居上
z-index:整数; 取值越大，显示顺序越靠上，z-index的默认值是0 z-index必须要配合定位才生效）