1、盒模型不能让第一个子级和父级脱离，子级和父级相连的，html设计的时候，宽度设计的是采用父级的宽度，而子级是获取父级的宽度，水平方向可以随便移动，垂直的参数规定是父级的，而父级一般是不需要设置高度是由子级撑开的，所以子级的高度就是决定父级的高度
2、如果自己的宽没有设置，那么自己的宽就是自动获取父级的宽度
3、如果父级的高度没有设置，子级设置了高度，子级会撑开父级，父级的高度就是子级的高度
父相子绝布局（子级相对于父级来布局）
需求：在父级区域内子级随意移动布局
例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定位布局</title>
<style>
.sup {
200px;
height: 200px;
background-color: orange;
}
.sub {
100px;
height: 100px;
background-color: red;
}
/*实现需求，父子都自行规定了自身的宽高，父级和子级脱离关联，子级在父级的区域内随意移动*/
/*采用定位布局实现以上的需求*/
/*这里出现一个专业名词就是父相子绝，就是父级相对定位，子级绝对定位，子级子级移动，参数区域要参照父级*/
.sup {
/*relative 就是相对定位*/
position: relative;
}
.sub {
/*position就是定位，absolute就是绝对的意思，绝对定位*/
position: absolute;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="sup">
<div class="sub"></div>
</div>
</body>
</html>
PS：设置父相子绝后，子级不再获取父级的宽高，已经完全脱离父级了。可以自由设置宽高
PS：父相子绝后，自己就可以通过 top / left / bottom / right 四个方位来调整位置
PS：父相子绝一定要父级和子级都独立设置宽高
PS：一个标签下的两个区域，如果有重叠区域，默认是后写的区域覆盖先写的区域
PS：定位布局下可以采用z-index来修改显示层级的优先级,取值为正整数，谁的值大谁在上方显示
例2：
需求：父级在页面中自由布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定位布局</title>
<style>
.sup {
200px;
height: 200px;
background-color: orange;
}
.sub {
50px;
height: 50px;
background-color: red;
}
.sup {
/*relative 就是相对定位*/
position: relative;
}
.sub {
position: absolute;
}
.s1 {
150px;
height: 150px;
background-color: cyan;
right: 0;
top: 0;
/*定位布局下可以采用z-index来修改显示层级的优先级,取值为正整数*/
z-index: 66;
}
.s2 {
150px;
height: 150px;
background-color: red;
left: 0;
bottom: 0;
z-index: 65;
}
.dc {
200px;
height: 400px;
background-color: yellowgreen;
/*固定定位，让父级在页面中自由定位*/
position: fixed;
right: 0;
top: 100px;
}
</style>
</head>
<body>
<div class="sup">
<div class="sub s1"></div>
<div class="sub s2"></div>
</div>
<div class="dc">
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
PS：固定定位参考的是页面窗口定位
PS：固定定位的窗口是永远静止的，页面滚动，相对窗口是不会移动的，这就是一般的页面广告banner