一：position: absolute;——绝对定位
div{
height: 100px;
width: 100px;
background-color: red;
position: absolute;
}
加了position之后你会发现方块还是没有变化，这是因为position必须与left和top,right和bottom配合使用。
你只能left和top配合，不能left和right，没意义。
div{
height: 100px;
width: 100px;
background-color: red;
position: absolute;
left: 100px;
top: 100px;
}
左边线距离左边100px，上边线距离上面100px，他就成这样了，或者你可以理解成他的坐标点就是（100，100）.
一般情况下咱们不会设置底，因为有时候一个东西他是会没有底的。
这时候你会发现小方块出生的时候左边和上面会有一个小空隙，这个小空隙不是margin就是padding是吧，那是谁的？
是body的！！是body的什么呢？
你可以吧body的margin和padding分别设置成0试一试，
是margin，
Body有个天生的margin是8像素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.demo{
height: 100px;
width: 100px;
background-color: red;
}
.box{
height: 100px;
width: 100px;
background-color: green;
}
</style>
<title></title>
</head>
<body>
<div class="demo"></div>
<div class="box"></div>
</body>
</html>
现在让box变成150px，demo加个透明度opacity: 0.5;
接下来我让第一个盒子变成定位元素，position: absolute;
你会发现绿色的方块上去了，这就是层模型的特点。
绝对定位的特点：
脱离原来位置就行定位；
证明：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.demo1{
height: 200px;
width: 200px;
background-color: orange;
}
.demo2{
height: 100px;
width: 100px;
background-color: black;
}
.demo3{
height: 50px;
width: 50px;
background-color: yellow;
}
</style>
<title></title>
</head>
<body>
<div class="demo1">
<div class="demo2">
<div class="demo3">
</div>
</div>
</div>
</body>
</html>
然后我再第二个盒子（demo2）上面加一个margin-left: 100px;他就带着他的孩子窜过来了。
在第一个盒子（demo1）上面加一个margin-left: 100px;
让大盒子带他们俩个一起过来。
现在我给第三个盒子（demo3）设置一个绝对定位position: absolute;没变化，只不过他变成了一个可定位元素而已。
现在我加一个left: 50px;
那说明什么问题，说明他相对于文档的边框进行定位是吧。
不对，咱还得实验。
我给他的父级（demo2）加一个position: relative;让他的父级变成可定位的元素，relative和absolute都行。
他就跑这里来了。
我如果把他的父级的定位摘掉，放到他的祖父级那里，
他就变这里来了。
如果祖父级也没有定位，他就回到这里
如果他的祖父级和他的父级都有定位，他还是相对于他父级的。
总结：
Absolute：相对于最近的有定位的父级进行定位，如果没有最近的父级定位，就相对于文档进行定位。