下面以一个图片堆叠效果示例介绍改变AP元素堆叠顺序的具体操作。本例最终效果如图8-8所示。

新建一个文档，单击“插入”栏“布局”面板中的“绘制APDiv”图标，在文档设计视图中插入一个AP元素。

光标定位在AP元素内，单击“插入”栏“常用”面板中的插入图像的图标，在AP元素里插入一张图像。

在“AP元素”面板中取消选中“防止重叠”复选框，按照前两步的方法再建两个AP元素，以及在AP元素中插入图像。此时的页面效果如图8-9所示。

图8-8 示例效果

图8-9 效果(www.daowen.com)

选中AP元素apDiv1，设置AP元素的堆叠顺序。打开AP元素管理面板，选中需要调整堆叠顺序的AP元素apDiv2，按下鼠标左键，上下拖动apDiv2使之处于apDiv3的上面，然后释放鼠标左键。也可单击Z索引区后修改Z值为3（Z值越大，越处于AP元素面板的上部）。

另一种方法是选中需要调整堆叠顺序的AP元素apDiv3，然后修改Z-Index的值为3。

以同样的方法设置apDiv1和apDiv2的堆叠顺序。设置后的AP元素管理面板如图8-10所示。

图8-10 AP元素的堆叠顺序

完成以上步骤，按F12键预览网页得到图8-8的效果。