三、层模型
什么是层模型？层模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作。 CSS定义了一组定位（positioning）属性来支持层布局模型。
在学习层模型之前，我们需要先了解一下层模型的三种形式：
1.绝对定位
2.相对定位
3.固定定位
那么问题就来了，什么是定位了，定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。定位主要通过CSS中的position属性来实现的。
一.绝对定位
设置position：absolute ：绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
我们通过下面的一段代码来了解绝对定位
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div,span{
position: absolute;
}
div{
width: 200px;
height: 200px;
border: 1px solid red;
}
span{
left: 100px;
top:50px;
}
</style>
</head>
<body>
<div>
<span>绝对定位</span>
</div>
</body>
</html>
运行结果：
这里我们可以看到，span和div的position属性的值都为absolute，即为绝对定位，所以span的位置是相对于他父元素div而确定位置。此时我们设置span的left和top值，也是相对于div的。
![CSS的伪元素和伪类的区别[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)