局部排版——相对位置与绝对位置

在网站设计过程中，需要选择组件定位类型，用得较多的有相对定位与绝对定位，那么他们有何区别呢？

在建站系统中主要在两个地方出现：一个是组件属性布局板块，另一个是添加组件（非容器组件）时，会出现相对布局和绝对布局的选择项：

一、相对位置（定位）

1.添加时组件的位置

相对位置的组件初始位置放在：目标容器内所选对象的之后。

2.相对位置组件的偏移

先看看下图：

上图中有三个模块，第二个块是设置了相对位置（定位）了的，这时大家看到它的位置并没有其它什么不同，跟其它两个块一样都处在正常的文档流中。

接下来给第二块设置一个偏移：左偏移:50px ;上偏移:30px，这时我们再看看效果：

这时我们发现第二个块针对它本身位置的起始点进行了一个偏移，但是它原来所占据的那个位置空间依然还在(虚线框标示的地方)，即使我们把偏移量设置得再大一点，使它完全离开原来的位置，它原来位于文档流中的位置仍然会存在，不会被第三个块浮动过来填补掉。

同时，它的偏移也不会把别的块从文档流中原来的位置挤开，如果有重叠的地方它会重叠在其它文档流元素之上，而不是把它们挤开，就像图中那样，它已经覆盖在了第三个块之上。

另外，我们可以设置它的层叠顺序来调整它的堆叠顺序。调整界面如下：

二、绝对位置（定位）

1.添加时组件的位置

绝对定位组件添加时的位置：插入到当前容器内当前鼠标位置。

2.绝对位置组件偏移

先看图：

上图中有三个模块，第二个块是设置了绝对位置（定位）了的，这时我们看到它的位置并没有其它什么不同，跟其它两个块一样都处在正常的文档流中。

接下来给第二块设置一个偏移：左偏移:200px ;上偏移:60px，这时我们再看看效果：

第二块的初始位置被第三块补充，第二块的位移位置是相对于父模块来定的。