4.3 z-index和display

一、z-index空间位置

z-index属性用于调整定位时重叠块的上下位置，与它的名称一样，想象页面为x-y轴，垂直于页面的方向为z轴．z-index值大的页面位于其值小的上方，如图1所示。

图1 z-index轴

z-index属性的值为整数，可以是正数也可以是负数。当块放设置了position属性时，该值便可设置各块之间的重叠高低关系。默认的z-index值为0，当两个块的z-index值一样时，将保持原有的高低覆盖关系。

二、盒子的display属性

通过前面的讲解．读者已经知道盒子有两种类型．一种是div这样的块级元素，还有一种是span这样的行内元素。

事实上，对于盒子有一个专门的属性，用以确定盒子的类型，这就是display属性。假设有如下HTML结构：

这时的效果如图2所示，Box-4、Box-5、Box-6是span．因此它们在一行中，其余的都各占一行。

图2 浏览器默认的显示效果

下面把前3个div的display属性设置为inline，即“行内”；接着把中间3个span的display属性设置为block，即块级；再把最后一个div和一个span的display属性设置为“none”，即“无”。具体的代码如下：

这时效果如图3所示。可以看到，原本应该是块级元素的div变成了行内元素，原本应该是行内元素的span变成了块级元素，并且设置为none的两个盒子消失了。

从这个例子可以看出，通过设置display属性，可以改变某个标记本来的元素类型，或者把某个元素隐藏起来。这个性质在后面的案例中，将发挥巨大的作用。

图3 强制改变盒子类型后的显示效果

本章重点

本章的重点和难点是深刻地理解“浮动”和“定位”这两个重要的性质，它们对于复杂页面的排版至关重要。因此，尽管本章的案例都很小，也很朴素，但是如果读者不能真正深刻地理解蕴含在其中的道理，后面的复杂案例效果是无法完成的。