absolute
第一种情况：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>absolute与relative的相爱相杀</title>
<style>
.p{
width: 200px;
border: 2px solid burlywood;
margin: 100px auto;
}
.box1{
position: absolute;
left: 100px;
width: 300px;
height: 300px;
background-color: #DEB887;
}
.box2{
position: absolute;
width: 200px;
height: 200px;
background-color: darkcyan;
}
span{color: red;}
</style>
</head>
<body>
<p>1,相对于一个<span>已定位的包含它</span>的元素</p>
<div class="box1">父类
<div class="box2">子类</div>
</div>
<p class="p">菜鸟教程解释：位置设置为 absolute 的元素，可定位于相对于第一个已定位（非静态的）的包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。</p>
</body>
</html>
截图：
由结果可知，当父类为一个（已经定位）的元素时：子类（absolute）则以父类的左上角的原始基点进行定位（left,right,top,bottom,margin,padding）;
第二种情况：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>absolute与relative的相爱相杀</title>
<style>
.box1{
margin-left: 100px;
width: 300px;
height: 300px;
background-color: #DEB887;
}
.box2{
position: absolute;
width: 200px;
height: 200px;
background-color: darkcyan;
}
span{color: red;}
</style>
</head>
<body>
<p>2,相对于一个<span>未定位的包含它</span>的元素,且子类没有<span>top,left,right,bottom(不包括marginpadding)</span></p>
<div class="box1">父类
<div class="box2">子类</div>
</div>
</body>
</html>
截图
结果可知：默认基于父类左上角，且只能由margin以及padding调整位置
第三种：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>absolute与relative的相爱相杀</title>
<style>
.box{
position: absolute;
left: 100px;
width: 400px;
height: 400px;
background-color: red;
}
.box1{
margin-left: 100px;
width: 300px;
height: 300px;
background-color: #DEB887;
}
.box2{
position:absolute;
left: 0px;
width: 200px;
height: 200px;
background-color: darkcyan;
}
span{color: red;}
</style>
</head>
<body>
<p>2,相对于一个<span>未定位的包含它</span>的元素,且子类存在<span>top,left,right,bottom(不包括marginpadding)</span>其中一项</p>
<div class="box">
<div class="box1">父类
<div class="box2">子类</div>
</div>
</div>
</body>
</html>
截图：
结果可知：如果子类定位为absolute，且存在TRBL其中一项，则以第一个的已定位的父类的左上角为基准，如没有，则以浏览器左上角为基准。
relative(相对的单纯，哈哈哈)
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>absolute与relative的相爱相杀</title>
<style>
.box{
position: absolute;
left: 100px;
width: 400px;
height: 400px;
background-color: red;
}
.box1{
margin-left: 100px;
width: 300px;
height: 300px;
background-color: #DEB887;
}
.box2{
position:relative;
left: 0px;
width: 200px;
height: 200px;
background-color: darkcyan;
}
p{width: 300px;border: 2px solid #DEB887;}
span{color: red;}
</style>
</head>
<body>
<p>2,相对于一个<span>其正常位置</span>通过<span>top,left,right,bottom，margin，padding</span>进行定位</p>
<div class="box">
<div class="box1">父类
<div class="box2">子类</div>
</div>
</div>
<p style="position: relative;margin-top: 440px;">菜鸟解释：生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。</p>
</body>
</html>
截图：
结果可知：relative定位相对简单，（但是如果一元素没有父类，且定位为relative则就要考滤，其在html中的层次关系处于那一层次了）（重要）。