三、层模型

什么是层模型？层模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。

在学习层模型之前，我们需要先了解一下层模型的三种形式：

1.绝对定位

2.相对定位

3.固定定位

那么问题就来了，什么是定位了，定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。定位主要通过CSS中的position属性来实现的。

一.绝对定位

设置position：absolute ：绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

我们通过下面的一段代码来了解绝对定位

Document

div,span{

position: absolute;

}

div{

width: 200px;

height: 200px;

border: 1px solid red;

}

span{

left: 100px;

top:50px;

}

绝对定位

运行结果：

这里我们可以看到，span和div的position属性的值都为absolute，即为绝对定位，所以span的位置是相对于他父元素div而确定位置。此时我们设置span的left和top值，也是相对于div的。