首先了解一下标准流
标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见的标准流排列方式、
块级元素：从上往下，垂直布局，独占一行
行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行
了解标准流是为了后面定位做准备，让我们回到定位上面来，首先了解一下定位的属性名
position：
常见的属性值：
静态定位：static
相对定位：relative
绝对定位：absolute
固定定位：fixed
水平方位：左left 右right
垂直方位：上top 下bottom
注意：偏移值是距偏移方向的距离。
静态定位
静态定位是默认值，就是之前认识的标准流
position：static
注意：
不能使用偏移值
静态定位就是之前标准流，不能通过方位属性进行移动
之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定
相对定位
position：relative
特点：
需要配合方位属性实现移动
相对于自己原来位置进行移动
在页面中占位置 没有脱标
绝对定位
position：absolute
特点：
需要配合方位属性实现移动
默认相对于浏览器可视区域进行移动
在页面中不占位置 已经脱标（脱离标准流）
绝对定位相对于谁移动？
祖先元素中没有定位 默认相对于浏览器进行移动
祖先元素中有定位 相对于 最近的 有定位 的祖先元素进行移
<!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>
.son {
position:absolute;
/* 方位属性 */
left: 100px;
top:100px;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="son"></div>
</body>
</html>
子绝父相
<!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>
.box {
/* 父亲给相对定位 */
position: relative;
/* 盒子居中 */
margin: 0 auto;
/* 宽 */
width: 400px;
/* 高 */
height: 400px;
/* 背景颜色 */
background-color: teal;
}
.son {
/* 儿子给绝对定位 */
position:absolute;
/* 方位属性 */
/* 距离左边100px */
left: 100px;
/* 距离上边100px */
top:100px;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
</html>
子绝父绝特殊场景
在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可！
原因：
父元素已经有定位已经满足要求，如果盲目修改父元素定位方式，可能会影响之前写好的布局
固定定位
position:fixed
需要配合方位属性实现移动
相对于浏览器可视区域进行移动
在页面中不占位置已经脱标
应用场景：
让盒子固定在屏幕中的某个位
不管里面内容有多少，滑动屏幕，下面的的区域一直固定在一个位置。
第一次写这个，哈哈哈，不怎么会。有什么不对的地方，还请各位大佬多多指点。