网站布局中的三种定位级

第1种定位级：块对象默认定位级

此定位级特点：块对象默认情况下跟据其出现顺序上下安排布局

下图中是用块对象默认定位级排列的一个大容器包着三个小容器：

第2种定位级：块对象浮动定位级

此定位级特点：高于第1种定位级（此级别的对象会压在第1种定位级别对象上面），此定位级中块对象可横向摆放。

下图中是用块对象浮动定位级排列的一个大容器包着三个小容器。

第3种定位级：绝对定位级

此定位级特点：高于第2种定位级（此级别的对象会压在其他定位级别对象上面），此定位级中的对象就像是photoshop里的图层。是用独立坐标来定位的。 下图中是用绝对定位级的显示效果

案例分析：

第一部分：给块对象加float属性让其升级为浮动定位级

默认情况下div都是第1种定位级——块对象默认定位级

如下图：

当我们给红色的子级设置float属性后，它便升级了！如果我们把绿色子级的高改变大些，可以看得出来红色现在是压在绿色上面的。

看下图：

用同样的办法，我们给绿色和蓝色的子级都加float属性，他们就都跟红色的子级一样升级到了第2种定位级——块对象浮动定位级。

看下图：

第二部分：加position:absolute升级为绝对定位级

我们如果想要让我们的标签对象升级进入到第3种定位级——绝对定位级，只需要给其加上position:absolute属性。进入绝对定位级后的标签会压在其他定位级标签上面。 看下图：

网站布局技术是一个很简单的技术，因为始终在用这三种定位关系来安排布局。希望这个简单的说明对你在学习网站布局方法能有所帮助。