// 定位小结
// 定位模式 是否脱标占有位置 移动位置基准 模式转换（行内块） 使用情况
// 静态static 不脱标，正常模式 正常模式 不能 几乎不用
// 相对定位relative 不脱标，占有位置 相对自身位置移动 不能 基本单独使用
// 绝对定位absolute 完全脱标，不占有位置 相对于定位父级移动位置 能 要和定位父级元素搭配使用
// 固定定位fixed 完全脱标，不占有位置 相对于浏览器移动位置 能 单独使用，不需要父级
// 注意：
// 边偏移需要和定位模式联合使用，单独使用无效；
// top 和 bottom 不要同时使用；
// left 和 right 不要同时使用。
// 5. 网页布局总结
// 一个完整的网页，有标准流 、 浮动 、 定位 一起完成布局的。每个都有自己的专门用法。
// 1). 标准流
// 可以让盒子上下排列 或者 左右排列的
// 2). 浮动
// 可以让多个块级元素一行显示 或者 左右对齐盒子 浮动的盒子就是按照顺序左右排列
// 3). 定位
// 定位最大的特点是有层叠的概念，就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数值。
<div class="father">
<div class="son">子</div>
</div>
<div class="fixbox">
fixed
</div>
.father{
height: 200px;
width: 200px;
background-color: rgb(128,128,128);
position:relative;
top:50px;
left: 50px;
}
.son{
height: 30px;
width: 30px;
background-color: white;
position: absolute;
top:50%;
left: 50%;
margin-left: -15px;
margin-top: -15px
}
.fixbox{
position: fixed;
top:90%;
left: 90%;
width: 40px;
height: 40px;
background-color: red
}